jquery - 如何禁止将大文件添加到文件输入

Question

我有输入文件

<input class="input-file" type=file/>

我使用以下函数来检查文件大小

    $(".input-file[type=file]").change(function () {
        var file = this.files[0];
        if (file.size > 2*1024*1024) {
            alert("Too large Image. Only image smaller than 2MB can be uploaded.");
            return false;
        }
        $(".input-file[type=file]").submit();
    });

问题是即使用户收到警告消息“太大的图像。只能上传小于 2MB 的图像。”，但最终将 MyBigFile.txt 添加到输入文件中。如何不让用户将大于 2MB 的文件添加到文件输入中？

Answer 1

您可以用一个全新的输入替换有问题的输入，因为您不能对文件输入做太多事情。

$(document).on("change", ".input-file[type=file]", function () {
    var file = this.files[0];
    if (file.size > 2*1024*1024) {
        alert("Too large Image. Only image smaller than 2MB can be uploaded.");
        $(this).replaceWith('<input class="input-file" type="file">');
        return false;
    }
});

http://jsfiddle.net/EuAy8/2/