Question

我试图在用户上传时限制文件大小。我是JavaScript的新手，所以欢迎任何帮助。这就是我想要的：

<input type="file" id="input_file" name="input_file" required maxlength="40" onchange="checkFileSize(this)" data-max_size="1048576" title="bla bla"

function checkFileSize(elem) {
var fsize = elem.files[0].size;
var fname = elem.files[0].name.length;
if (fsize > elem.getAttribute("data-max_size") || fname > elem.getAttribute("maxlength")) {
    elem.setCustomValidity(elem.getAttribute("title"));
} else {

    elem.setCustomValidity("");
}

}

当用户上传大于1mb的文件或文件名中有40多个字符时，它不会触发标题（bla bla），没有任何反应。我做错了什么？

Answer 1

您可以使用File API。

这是一个有效的jsfiddle示例。用于验证的代码示例：

{{1}}

请注意，客户端验证仅用于通知/指导用户，您应该从不依赖它来存储服务器中的文件。

Answer 2

我已将您的代码放入JSBin - https://jsbin.com/rufigug/edit?html,js,console,output - 它似乎正在为我触发正确的IF块，也许您可以使用console.log fname + fsize并检查您的文件是否确实满足条件？< / p>

在MDN https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Limiting_the_size_of_a_file_before_its_upload

上有一些很好的文档

Answer 3

您正在使用活动onchange。根据{{3}}，仅适用于<select>。

更改onselect

的oninput

限制JavaScript中的文件大小上传

3 个答案: