我对demo进行了一些修改,以便在Rails应用程序中使用。插件在Chrome和FF中运行良好,但在IE中存在问题。
在IE(所有版本)中,我逐一选择多个文件并开始上传。插件只上传一个文件。如果我选择一个文件上传,那么什么都不会发生。
以下是main.js的内容
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload();
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
//[^/]*$/,
'/cors/result.html?%s'
)
);
//Reference :
// https://github.com/blueimp/jQuery-File-Upload/issues/1324
// https://github.com/blueimp/jQuery-File-Upload/issues/841
$('#fileupload').bind('fileuploadsubmit', function (e, data) {
var inputs = data.context.find(':input');
if (inputs.filter('[required][value=""]').first().focus().length) {
return false;
}
data.formData = inputs.serializeArray();
});
$('#fileupload').bind('fileuploadadd', function (e, data) {
alert('file added');
});
$('#fileupload').fileupload('option', {
url: '/gallery',
maxFileSize: 5000000,
acceptFileTypes: /(.|/)(gif|jpe?g|png)$/i,
process: [
{
action: 'load',
fileTypes: /^image/(gif|jpeg|png)$/,
maxFileSize: 20000000 // 20MB
},
{
action: 'resize',
maxWidth: 1440,
maxHeight: 900
},
{
action: 'save'
}
]
}).bind('fileuploadstop', function (e, data) {
alert('files uploaded');
});
});
从演示html中,我删除了除+添加文件和开始上传按钮以及进度条相关代码外的所有内容。
有人能帮我纠正这个问题吗?
在@Jignesh的帮助下,我终于找到了根本原因。
在我们的应用程序中,我们通过提供两种方法来选择要上传的文件,从而定制了行为:1) +"添加文件"按钮2) 链接
观察到的行为:手动点击+添加文件按钮上传的所有文件都有效并成功上传。
但是,使用链接选择的文件不会。原因是链接程序触发+添加文件按钮上的点击事件,IE不支持该事件,因此不会对使用该链接上传的选定文件发起POST请求。
控制台还显示错误:在IE的情况下,针对上述观察到的行为,SCRIPT5访问被拒绝。
参考文献:
- https://stackoverflow.com/a/1829817
- https://github.com/blueimp/jQuery-File-Upload/issues/1382
- https://github.com/blueimp/jQuery-File-Upload/issues/457