ie 将文件上载到服务器,jQuery blueimp文件上传：在IE中将N-1个文件上传到服务器(jQuery blueimp File Upload : Uploads N - 1 files t...
jQuery blueimp文件上传：在IE中将N-1个文件上传到服务器(jQuery blueimp File Upload : Uploads N - 1 files to server in IE)
我在我的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');
});
});
从demo html中删除了除+ Add Files和Start Upload按钮以及进度条相关代码之外的所有内容。
有人可以帮我纠正这个问题吗？
I have modified demo little bit to use in my Rails application. The plugins works fine in Chrome and FF but have an issue in IE.
In IE(all versions) I select multiple files one by one and starts uploading. The plugin uploads all but one file. If I select single file to upload then nothing happens.
Here is content of 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');
});
});
From the demo html I removed all but + Add Files and Start Upload buttons and progress bar related code.
Would anyone please help me to rectify this issue?
原文：https://stackoverflow.com/questions/12407458
更新时间：2020-10-18 14:10
最满意答案
最后，我在@Jignesh的帮助下找到了根本原因。
在我们的应用程序中，我们通过提供两种方式来选择要上载的文件来自定义行为：1)+添加文件按钮2)链接
观察到的行为：MANUALLY上传的所有文件点击+添加文件按钮都可以正常上传。
但是，使用该链接选择的文件不会。 原因是PROGRAMATICALLY 链接触发了+添加文件按钮上的CLICK事件，IE不支持，因此没有为使用该链接选择上传的文件启动POST请求。
控制台也显示错误：SCRIPT5访问在IE的情况下拒绝上述观察到的行为。
参考文献：
Finally I found the root cause with help of @Jignesh .
In our application we have customized the behavior by providing two ways to select the files to upload: 1) + Add files button 2) Link
Observed behavior: All files uploaded by MANUALLY clicking the + Add files button works and gets uploaded successfully.
However files selected using the link doesn't. The reason being the link PROGRAMATICALLY triggers the CLICK event on + Add files button, which IE doesn't support and thus no POST requests are initiated for files selected for upload using the link.
Also Console shows error: SCRIPT5 Access Denied for above observed behavior in case of IE.
References:
相关问答
我终于自己找到了原因： 检查呼叫的文件大小是以字符串形式返回的，但必须是数字 。 改变这一行 data.uploadedBytes = respData && respData.size;
至 data.uploadedBytes = respData && Number(respData.size);
解决了这个问题。 ======== 详细的解释 为什么它失败， data.uploadedBytes是String类型而不是Number： 在bluimp实现中的某个地方，下一个块的File-
...
改变UploadHandler.php 这两行 'upload_dir' => dirname(dirname($this->get_server_var('SCRIPT_FILENAME'))) . '/wp-content/uploads/wpcf7_uploads/',
'upload_url' => $wp_content_url . 'wpcf7_uploads/',
到wpcf7_uploads旁边的任何其他文件夹使它工作。 我改成了 'upload_dir
...
你可以使用formData ： $('#fileupload').bind('fileuploadsubmit', function (e, data) {
// The example input, doesn't have to be part of the upload form:
var input = $('#divHostApplicationId');
data.formData = {example: input.val()};
if (!data.
...
将template-download部分更改为更像这样的内容：
{% for (var i=0, file; file=o.files[i]; i++) { %}
{% if (file.thumbnailUrl) { %}
...
您可以在change事件中使用Node.removeChild()或将元素style设置为display:none来从document中删除元素 You can remove the element from document at change event, using Node.removeChild() or set element style to display:none
在IE中，您可以尝试F12 Network选项卡并Start Capturing以查看实际的请求/响应，如果尚未。 比较内容类型和长度的标题以及数据的实际编码与Chrome的标题，并查看是否可以发现任何明显的差异？ In IE you could try the F12 Network tab and Start Capturing to see the actual request/response, if you haven't already. Compare the headers for
...
使用插件的“程序化文件上传”功能，我能够在新表中显示以前表格的文件和fileInputs，如下所示： $('#fileupload').fileupload('add', {
files: filesList,
fileInput: $(this)
});
https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-upload https://github.com/blueimp/jQuery
...
您可以使用fileUpload拦截器来解析"multipart/form-data"请求。 它在Struts2调度程序的准备操作中使用由MultipartRequestWrapper包装的相同commons-fileupload实现。 有关如何使用您在此处找到的示例进行文件上传的更多信息 You may use fileUpload interceptor to parse your "multipart/form-data" requests. It uses the same commons-
...
最后，我在@Jignesh的帮助下找到了根本原因。 在我们的应用程序中，我们通过提供两种方式来选择要上载的文件来自定义行为：1)+添加文件按钮2)链接 观察到的行为：MANUALLY上传的所有文件点击+添加文件按钮都可以正常上传。 但是，使用该链接选择的文件不会。 原因是PROGRAMATICALLY 链接触发了+添加文件按钮上的CLICK事件，IE不支持，因此没有为使用该链接选择上传的文件启动POST请求。 控制台也显示错误：SCRIPT5访问在IE的情况下拒绝上述观察到的行为。 参考文献： h
...
这里读取文件可能存在问题。 检查/ Grep您的登台服务器是否有任何具有双斜杠的源文件//在奇怪的地方(比如PHP文件的开头)。 它可能正在运行该文件，错误地打印这些斜杠，并结束输出。 如果是这种情况，很可能服务器不会看到BlueImp代码，因此所有那些与上传完全无关的简单输出标头。 There may be an issue with reading files here. Check/Grep your staging server for any source files that have
...