jQuery FileUploadが「完了」をトリガーしません

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設定やコールバックを定義できます。 ajaxオプション ファイル のアップロードが機能するためには、processData、contentTypeおよびcacheがfalseに設定されており、変更しないでください。どこかにあなたのコード内

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

あなたはまた、これらのAJAXの設定を変更している可能性があり、とにかく、$ .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) 

しかしをログファイルにエラー追跡を追加するを忘れないでください。もちろん ！マニュアルに記載され

Answer 6

はthis Callback Optionをお試しください：

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

をそれは確かに私のために動作します。

Answer 7

私はmulter、multer-azure-storage、およびblueimp-file-uploadを使用しています。すべて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(); 
    } 
);