jQuery FileUpload 不会触发“完成”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14674999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery FileUpload doesn't trigger 'done'
提问by Tomek Buszewski
I use jQuery-File-Uploadplugin. I wrote a simple code to test it - and it works, but not without problems. It doesn't trigger done, even if the file is uploaded and progress bar reached its end.
我使用jQuery-File-Upload插件。我写了一个简单的代码来测试它 - 它可以工作，但并非没有问题。它不会触发done，即使文件已上传且进度条已到达终点。
Here's the code:
这是代码：
$('#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');
}
});
My input is as simple as that:
我的输入就这么简单：
<input type="file" id="file_file" name="file[file]" />
采纳答案by Tomek Buszewski
I changed couple of things and it works. Here:
我改变了几件事，它的工作原理。这里：
$('#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) {
/**/
});
}
});
回答by bradw2k
If your server is not returning JSON, try removing:
如果您的服务器没有返回 JSON，请尝试删除：
dataType: 'json'
Otherwise you may be ending up with a fail event, which is easy to test for:
否则，您可能会遇到失败事件，这很容易测试：
fail: function(e, data) {
alert('Fail!');
}
回答by Juanmi Taboada
I repaired with autoUpload: true, it looks like when the autoUpload property is not set (even if upload is working as expected) the done event is not triggered.
我用autoUpload: true修复，看起来当 autoUpload 属性没有设置时（即使上传按预期工作）， done 事件没有被触发。
回答by YlianEstevez
Experimented today! If you're using PHP, be sure that your uploadhanlerPHP file doesn't display error or warning. It creates a bad JSON output and when your file is uploaded, the plugin cannot send a correct JSON buffer with done event.
今天实验了！如果您使用的是 PHP，请确保您的uploadhanlerPHP 文件不会显示错误或警告。它会创建一个错误的 JSON 输出，当您的文件上传时，插件无法发送带有 done 事件的正确 JSON 缓冲区。
For error tracking on your PHP file, it's better to write a log file instead of display errors on such scripts. You can use:
对于 PHP 文件的错误跟踪，最好编写日志文件而不是在此类脚本上显示错误。您可以使用：
error_reporting(0)
But DO NOT FORGETto add error tracking in a log file. Of course !
但不要忘记在日志文件中添加错误跟踪。当然 ！
回答by Waqleh
Try this Callback Optionas described in the documentation:
按照文档中的说明尝试此回调选项：
$('#fileupload').bind('fileuploaddone', function (e, data) {
alert('Done');
});
It sure works for me.
它肯定对我有用。
回答by xemasiv
i'm using multer, multer-azure-storage, and blueimp-file-upload. all served from unpkg.com. below is a multiple file upload with the done trigger. working as of 10/22/17.
我正在使用 multer、multer-azure-storage 和 blueimp-file-upload。全部来自 unpkg.com。下面是一个带有完成触发器的多文件上传。从 17 年 10 月 22 日开始工作。
js file:
js文件：
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/vendor/jquery.ui.widget.js"></script>
<script src="https://unpkg.com/[email protected]/js/jquery.iframe-transport.js"></script>
<script src="https://unpkg.com/[email protected]/js/jquery.fileupload.js"></script>
page html, served from express:
页面 html，由 express 提供：
$('#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
// 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
// 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();
}
);
回答by mikakun
$(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);
}
});
works perfectly for me;
非常适合我；
differences are
差异是
the url is set (i hope you just forgot to put it in your snippet here);
the way i add file to the download queue
sequential upload (?)
网址已设置（我希望您只是忘记将其放在此处的代码段中）；
我将文件添加到下载队列的方式
顺序上传 (?)
edit :
编辑 ：
The jQuery File Upload plugin makes use of jQuery.ajax() for the file upload requests. This is true even for browsers without support for XHR, thanks to the Iframe Transport plugin.
The options set for the File Upload plugin are passed to jQuery.ajax() and allow to define any ajax settings or callbacks. The ajax options processData, contentType and cache are set to false for the file uploads to work and should not be changed.
jQuery 文件上传插件使用 jQuery.ajax() 来处理文件上传请求。由于 Iframe Transport 插件，即使对于不支持 XHR 的浏览器也是如此。
为文件上传插件设置的选项传递给 jQuery.ajax() 并允许定义任何 ajax 设置或回调。ajax 选项 processData、contentType 和 cache 设置为 false 以使文件上传正常工作，不应更改。
https://github.com/blueimp/jQuery-File-Upload/wiki/Options
https://github.com/blueimp/jQuery-File-Upload/wiki/Options
somewhere in your code you could have also changed those ajax settings; anyhow that says that if you have your settings right since it's making use of $.ajax the done cannot be not triggered
在您的代码中的某个地方，您还可以更改这些 ajax 设置；无论如何，如果您的设置正确，因为它使用了 $.ajax，则无法触发 done
