使用输入类型=“文件"上传文件带有 .change() 事件的字段并不总是在 IE 和 Chrome 中触发 [英] Upload files using input type="file" field with .change() event not always firing in IE and Chrome

问题描述

我有一段简单的代码来上传文件:

I have simple piece of code to upload files:

$(document).ready(function () {
    $(".attachmentsUpload input.file").change(function () {
        $('form').submit();
    });
});

<form class="attachmentsUpload" action="/UploadHandler.ashx" method="post" enctype="multipart/form-data">
    <input type="file" class="file" name="file" />
</form>

当我点击输入然后在对话框中选择一个文件时，我正在使用 ajax 提交这个文件.这不是这里的重要部分.重要的部分是，当我在对话框中第二次选择同一个文件时，在提交第一个文件后， .change() 事件不会在 IE 和 Chrome 中触发.但是当我选择不同的文件时，事件会触发并正常工作.在 Firefox 下，它一直在发射.

While I click on input and then select a file in dialog box, I'm submitting this file using ajax. This is not important part here. Important part is, that while I select the same file second time in the dialog box, just after submitting the first file, the .change() event does not fire in IE and Chrome. But while I choose different file, the event fires and works properly. Under Firefox it is firing all the time.

如何解决此问题，使其按预期工作(如在 Firefox 中)?

How to workaround this, to work as expected (as in Firefox) ?

推荐答案

说明

出现这种情况是因为如果您再次选择同一个文件，输入字段(选定的文件路径)的值不会改变.

Description

This happens because the value of the input field (the selected filepath) does not change if you select the same file again.

您可以将 onChange() 事件中的值设置为空字符串，并仅在该值不为空时提交表单.看看我的示例和这个 jsFiddle Demonstration.

You can set the value in the onChange() event to an empty string and submit your form only if the value is not empty. Have a look at my sample and this jsFiddle Demonstration.

$(".attachmentsUpload input.file").change(function () {
    if ($(".attachmentsUpload input.file").val() == "") {
        return;
    }
    // your ajax submit
    $(".attachmentsUpload input.file").val("");
});

更新

无论出于何种原因，这在 IE9 中都不起作用.您可以替换元素以重置它们.在这种情况下，您需要 jQuery live() 来绑定事件，因为您的输入字段将动态(重新)创建.这将适用于所有浏览器.

Update

This, for any reason, does not work in IE9. You can replace the element to reset them. In this case you need jQuery live() to bind the event, because your input field will dynamically (re)created. This will work in all browsers.

我在 stackoverflow answer 上找到了这个解决方案 Clearing input type='file' using jQuery

I found this solution on the stackoverflow answer Clearing input type='file' using jQuery

$(".attachmentsUpload input.file").live("change", function () {
    if ($(".attachmentsUpload input.file").val() == "") {
        return;
    }
    // get the inputs value
    var fileInputContent = $(".attachmentsUpload input.file").val();
    // your ajax submit
    alert("submit value of the file input field=" + fileInputContent);
    // reset the field
    $(".attachmentsUpload input.file").replaceWith('<input type="file" class="file" name="file" />');
});​

更多信息

• jQuery.live()
• jQuery.replaceWith()

注意: live 现在从更高版本的 jQuery 中删除.请使用 on 而不是 live.

这篇关于使用输入类型=“文件"上传文件带有 .change() 事件的字段并不总是在 IE 和 Chrome 中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！