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

Question

I recently found a bug that made my server crash during a file upload.

When the user clicks on a file input, and chooses a file to upload. If the user deletes or renames the file before submitting the form, Chrome still sends an empty file. (while firefox and IE handle the error correctly)

After the user has clicked on the "submit" button, I've tryed to check the file size, but it is not null.

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

I've already handled the error server-side, but would like to add some validation client-side.

Answer 1

Using the JavaScript File API we can pull the size of the file through the object's size property using element.files[0].size . To ensure that a file exists with JavaScript, we can simply:

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

We use typeof to ensure that a file has actually been selected ( el.files[0] will be undefined otherwise), and then if that passes we check that the file size is greater than 0.

Here's a JSFiddle demo which I've tested in Chrome.

As an important note, however, you would still need some server-side validation for users with JavaScript disabled.