ie 将文件上载到服务器,jQuery blueimp文件上传：在IE中将N-1个文件上传到服务器(jQuery blueimp File Upload : Uploads N - 1 files t...

weixin_39555579

于 2021-08-05 17:09:19 发布

阅读量197

点赞数

文章标签： ie 将文件上载到服务器

博客内容涉及一个使用jQuery Blueimp File Upload插件在Rails应用中的问题，该问题在IE浏览器中出现，只能上传N-1个文件。问题在于IE不支持通过链接触发文件上传按钮的点击事件。解决方案是确保正确处理文件选择和上传的事件。

摘要由CSDN通过智能技术生成

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

...