jQuery FileUpload가 'done'을 트리거하지 않습니다.

Question

jQuery-File-Upload 플러그인을 사용합니다. 나는 그것을 테스트하기 위해 간단한 코드를 작성했다. 문제없이 작동한다. 파일을 업로드하고 진행률 표시 줄이 끝나더라도 done을 트리거하지 않습니다.

$('#file_file').fileupload({ 
    dataType: 'json', 
    autoUpload: true, 
    add: function (e, data) { 
     data.context = $('<p/>').text('Uploading...').appendTo(document.body); 
     data.submit(); 
    }, 
    progressall: function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#progress .bar').css(
      'width', 
      progress + '%' 
     ); 
    }, 
    done: function (e, data) { 
     alert('Done'); 
    } 
}); 

내 입력만큼 간단하다 : 여기

코드의

<input type="file" id="file_file" name="file[file]" /> 

Answer 1

몇 가지를 변경했고 작동합니다. 여기 :

$('#file_file').fileupload({ 
    autoUpload: true, 
    add: function (e, data) { 
     $('body').append('<p class="upl">Uploading...</p>') 
     data.submit(); 
    }, 
    progressall: function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#progress .bar').css(
      'width', 
      progress + '%' 
     ); 
    }, 
    done: function (e, data) { 
     $('.upl').remove(); 
     $.each(data.files, function (index, file) { 
      /**/ 
     }); 
    } 
}); 

Answer 2

$(input).fileupload(

     url  : '...' 

     ,dataType : 'json' 
     ,sequentialUploads : true 

     ,add  : function (e,data) { 


      $.each(data.files,function(i,file){ 

       file.jqXHR = data.submit() 
          .success(function (result, textStatus, jqXHR) {/* ... */}) 
          .error(function (jqXHR, textStatus, errorThrown) { 
          }) 
          .complete(function (result, textStatus, jqXHR) { 
           //...     
            }); 

       }); 
     } 


     ,done: function (e, data) { 
     console.log(data); 

     } 


    }); 

나를 위해 완벽하게

작품;

차이 (난 당신이 여기 당신의 조각에 넣어 잊었 희망) URL이 설정되어

• 이다;

• 내가 다운로드 대기열에 파일을 추가하는 방식

• 순차적 업로드

편집 (?) :

JQuery와 파일 업로드 플러그인은 jQuery.ajax를 사용합니다() 파일 업로드 요청. 이는 Iframe Transport 플러그인 덕분에 XHR을 지원하지 않는 브라우저에서도 마찬가지입니다.

파일 업로드 플러그인에 설정된 옵션은 jQuery.ajax() 으로 전달되며 모든 아약스 설정 또는 콜백을 정의 할 수 있습니다. ajax 옵션 업로드가 작동하기 때문에 processData, contentType 및 cache가 false로 설정되므로 변경해서는 안됩니다. 여러분의 코드 어딘가에 당신이 할 수있는 https://github.com/blueimp/jQuery-File-Upload/wiki/Options

또한 그 아약스 설정을 변경; 어쨌든 당신은 $ .ajax를 사용하고 있기 때문에 설정이 올바르다면 done은 트리거 될 수 없다고 말합니다.

Answer 3

나는 autoUpload와 수리 : 사실을의 autoUpload 속성이 설정되지 않은 경우 수행 이벤트가 트리거되지 않습니다 (업로드가 예상대로 작동되는 경우에도) 것 같습니다. 서버가 JSON을 반환하지 않는 경우

Answer 4

제거하려고 :

fail: function(e, data) { 
    alert('Fail!'); 
} 

Answer 5

을 실험 오늘 :

dataType: 'json' 

그렇지 않으면 당신이 테스트하기 쉬운 이벤트를 실패로 끝나는 할 수있다! PHP를 사용하는 경우 uploadhanler PHP 파일에 오류 또는 경고가 표시되지 않는지 확인하십시오.나쁜 JSON 출력을 만들고 파일을 업로드 할 때 플러그인은 done 이벤트와 함께 올바른 JSON 버퍼를 보낼 수 없습니다.

PHP 파일에서 오류를 추적하려면 해당 스크립트에서 오류를 표시하는 대신 로그 파일을 작성하는 것이 좋습니다. 당신은 사용할 수 있습니다

error_reporting(0) 

그러나 는 로그 파일에 오류 추적을 추가을 잊지 마십시오. 당연하지 !

$('#fileupload').bind('fileuploaddone', function (e, data) { 
    alert('Done'); 
}); 

그것은 확실히 작품을 나를 위해 : 문서에 설명 된대로

Answer 6

는 this Callback Option을보십시오.

Answer 7

저는 멀더, 멀터 - 푸른 색 저장소 및 블루 핀 파일 업로드를 사용하고 있습니다. 모두 unpkg.com에서 제공했습니다. 아래는 완료된 트리거가있는 다중 파일 업로드입니다. 10/22/17 현재로 일하고 있습니다.

JS 파일 :

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script> 
    <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/vendor/jquery.ui.widget.js"></script> 
    <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.iframe-transport.js"></script> 
    <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.fileupload.js"></script> 

페이지 HTML, 고속에서 제공 :

 $('#fileupload').fileupload({ 
      url: 'https://domainwhatevs/my-listings/edit/[property id]/gallery', 
      paramName: '_file', 
      dataType: 'json', 
      type: 'POST', 
      autoUpload: true, 
      add: function (e, data) { 
       console.log('uploading:', data) 
       data.submit(); 
      }, 
      done: function (e, data) { 
       console.log('done triggered'); 
       console.log(data._response.result.result[0].originalname, 'uploaded at', data._response.result.result[0].url); 
       $.each(data.files, function (index, file) { 
       // console.log(file.name, 'uploaded.') 
       // console.log('done'); 
       // console.log(index); 
       // console.log(file); 
       }); 
       console.log(data); 
      } 
     }); 

// 내-명부 작성/편집/[속성 ID]/갤러리/GET

app.get(
    [ 
     '/my-listings/edit/:_id/gallery' 
    ], 
    (req, res) => { 
     console.log('image gallery:', req.params._id); 
     res.render('my-listings--edit--gallery', { 
      _id: req.params._id, 
      session: req.session 
     }); 
    } 
); 

// POST/my-listings/edit/[속성 ID]/갤러리

app.post(
    [ 
     '/my-listings/edit/:_id/gallery' 
    ], 
    upload.array('_file'), 
    (req, res, next) => { 
     console.log(req.files); 
     res.setHeader('Content-Type', 'application/json'); 
     res.send({result: req.files}); 
     next(); 
    } 
);