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

问题描述

  $（document）.ready（function（）{
 $（。attachmentsUpload input.file）。change（function（）{
 $（'form'）。submit（）; 
}）; 
}）; 
 
< form class =attachmentsUploadaction =/ UploadHandler.ashxmethod =postenctype =multipart / form-data> 
< input type =fileclass =filename =file/> 
< / form> 
  

当我点击输入，然后在对话框中选择一个文件，我提交这个文件阿贾克斯。这在这里不重要。重要的部分是，当我在对话框中第二次选择同一文件时，在提交第一个文件之后，.change（）事件在IE和Chrome中不会触发。但是，当我选择不同的文件，事件启动和正常工作。在Firefox下，它一直在触发。

如何解决这个问题，如预期的那样工作（就像在Firefox中一样）？

发生这种情况的原因是，如果选择了输入字段（所选文件路径）的值，则不会更改您可以将 onChange（）事件中的值设置为一个空字符串，并提交只有当这个值不是空的时候才是你的表单。看看我的示例和这个 jsFiddle Demonstration 。

样例

  $（。attachmentsUpload input.file）。change（function（）{
 if （$。attachmentsUpload input.file）。val（）==）{
 return; 
} 
 //你的ajax提交
 $（。attachmentsUpload input.file）。val（）; 
}）; 
  

更新

，在IE9中不起作用。您可以替换元素来重置它们。
在这种情况下，您需要使用jQuery live（）来绑定事件，因为您的输入字段将被动态（重新）创建。 b $ b这将适用于所有浏览器。

我发现这个解决方案在stackoverflow答案

 清除输入类型文件 - 使用jquery $（。attachmentsUpload input.file）.val（）==）{
返回; 
} 
 //获取输入值
 var fileInputContent = $（。attachmentsUpload input.file）。val（）; 
 //你的ajax提交
 alert（提交文件输入字段的值=+ fileInputContent）; 
 //重置字段
 $（。attachmentsUpload input.file）。replaceWith（'< input type =fileclass =filename =file/>'）; 
}）; 
  

更多信息

• jQuery.live（）


• jQuery.replaceWith（）
li>

查看我更新的 jsFiddle

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>

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.

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.

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.

Sample

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

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.

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" />');
});​

More Information

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

Check out my updated jsFiddle

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