使用带有.change()事件的input type ="file"字段上传文件并不总是在IE和Chrome中触发

Question

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

$(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下,它一直在开火.

如何解决这个问题,按预期工作(如在Firefox中)？

Answer 1

描述

发生这种情况是因为如果再次选择同一文件,则输入字段(所选文件路径)的值不会更改.

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

样品

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

更新

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

我在stackoverflow上找到了这个解决方案,使用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()

看看我更新的jsFiddle

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