文件输入：在提交表单之前，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]将未定义），然后如果通过，我们检查文件大小是否为大于0。

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

但是，作为一个重要的注意事项，对于禁用了JavaScript的用户，您仍然需要进行一些服务器端验证。