jQuery FileUpload不会触发’done’

我使用jQuery-File-Upload插件。 我写了一个简单的代码来测试它 – 它可以工作，但并非没有问题。 即使文件已上传且进度条已到达结束，它也不会触发done 。

这是代码：

 $('#file_file').fileupload({ dataType: 'json', autoUpload: true, add: function (e, data) { data.context = $('
').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'); } }); 

我的输入很简单：

Answer 1

如果您的服务器没有返回JSON，请尝试删除：

 dataType: 'json' 

否则，您可能会遇到一个容易测试的失败事件：

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

Answer 2

我换了几件事就行了。 这里：

 $('#file_file').fileupload({ autoUpload: true, add: function (e, data) { $('body').append('
Uploading...
') 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 3

我使用autoUpload修复：true ，看起来当未设置autoUpload属性时（即使上传按预期工作），也不会触发done事件。

Answer 4

尝试使用文档中描述的回调选项 ：

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

这对我有用。

Answer 5

今天实验！ 如果您使用的是PHP，请确保您的uploadhanler PHP文件不显示错误或警告。 它会创建一个错误的JSON输出，当您上传文件时，插件无法使用done事件发送正确的JSON缓冲区。

对于PHP文件的错误跟踪，最好在这些脚本上编写日志文件而不是显示错误。 您可以使用：

 error_reporting(0) 

但是不要忘记在日志文件中添加错误跟踪。 当然 ！

Answer 6

我正在使用multer，multer-azure-storage和blueimp-file-upload。 全部来自unpkg.com。 下面是带有完成触发器的多文件上传。 截至10/22/17工作。

js文件：

页面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); } }); 

// GET / my-listings / edit / [property id] / gallery

 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 / [property id] / gallery

  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(); } ); 

Answer 7

  $(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传输插件，即使对于不支持XHR的浏览器也是如此。

为文件上载插件设置的选项将传递给jQuery.ajax（），并允许定义任何ajax设置或回调。 ajax选项processData，contentType和cache设置为false，以使文件上载起作用，不应更改。

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

您可以在代码中的某处更改这些ajax设置; 无论如何，如果你的设置正确，因为它正在使用$ .ajax，所以不能触发完成