22

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

$(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 中）？

4

2 回答 2

31

描述

发生这种情况是因为如果您再次选择相同的文件，输入字段（选定的文件路径）的值不会改变。

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

样本

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

更新

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

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

更多信息

查看我更新的 jsFiddle

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

于 2012-04-18T17:51:15.707 回答
1

根据 dknaack 的回答，线索是使用 jquery live 绑定更改事件并在提交后重置输入字段：

$(document).ready(function () {
    $(".attachmentsUpload input.file").change(function () {
        $('form').submit();  /* sync submit */
        $(".attachmentsUpload input.file").replaceWith('<input type="file" class="file" name="file" />');
    });
});

必须在提交事件完成后执行重置。当提交为async时，例如在ajax 成功事件中重置该字段。

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

.ajaxForm({
    ...
    success: function (result) {
        // reset the field - needed for IE to upload the same file second time                    
        $this.find("input.file").replaceWith('<input type="file" class="file" name="file" />');
    }
});
于 2012-09-20T13:57:25.540 回答