文件输入：Chrome 在提交表单之前不检查文件是否仍然存在

Question

我最近发现了一个错误，导致我的服务器在文件上传期间崩溃。

当用户点击文件输入，并选择要上传的文件时。如果用户在提交表单之前删除或重命名了文件，Chrome 仍然会发送一个空文件。 （而 Firefox 和 IE 正确处理错误）

用户点击“提交”按钮后，我尝试检查文件大小，但不为空。

        if (file.size == 0) {
            NotificationFactory.AlertMessage({ messageType: "error", message: "File is missing" });
        }

我已经在服务器端处理了错误，但想在客户端添加一些验证。

Answer 1

使用 JavaScript File API，我们可以使用 element.files[0].size 通过对象的 size property 拉取文件的大小。为了确保文件存在于 JavaScript 中，我们可以简单地：

if(typeof el.files[0] !== 'undefined' && el.files[0].size > 0) {
    /* Success! */
}

我们使用typeof 来确保文件已被实际选择（el.files[0] 将是undefined 否则），然后如果通过，我们检查文件大小是否大于 0。

这是我在 Chrome 中测试过的JSFiddle demo。

但是，重要的一点是，您仍然需要对禁用 JavaScript 的用户进行一些服务器端验证。