防止使用 Javascript (JQuery) 更改文件输入

Question

I'm trying to prevent a file input being changed if I conditionally tell the user the file is too large, but even capturing the change and preventing default, it's still filled in ie:

  // CHECK FILE ISNT ABOVE 500MB ON CHANGE
      $(".upload-file").change(function (e) {

        // conditional checks
        var fileSize = $('.upload-file').get(0).files[0].size; // in bytes

        if (fileSize > 500000000) {
          e.preventDefault();
          swal('File size is more than 500 MB, please upload a smaller file. Support for larger files will be rolled out soon.');
          return false;
        }

  

      });

Here's my code, what am I doing wrong?

Answer 1

如果要重置文件输入：

$(".upload-file").val(null);

Answer 2

I would suggest to reset the input type=file if the condition doesn't match as below:

$('.upload-file').on("change", function (e) {
    if (this.files[0] != null) {
        var fileSize = this.files[0].size;
        if (fileSize > 50) {
            alert("File too large!");
            var control=$("#"+$(this).attr('id'));//get the id
            control.replaceWith(control = control.clone().val(''));//replace with clone
            return;
        }
        else {
            alert("File ok");
        }
    }
});

Also do note that this.files[0].size returns file size in bytes. So according to your validation, you will not allow to upload file whose size is more that 50 bytes

Answer 3

The code below will check the file size, if it is above your threshold (maxFileSize ), then it will throw an error and reset the file upload dialogue. This prevents any further processing of the file, for example if you are manipulating the file in some way before submitting the form.

 $(document).ready(function() { $('.upload-file').on('change', function(e) { try { var fileSize = 0; var maxFileSize = 5 // in mb fileSize = $('.upload-file')[0].files[0].size //size in kb fileSize = fileSize / 1048576; //size in mb if (fileSize > maxFileSize) throw "Too big"; } catch (e) { alert("Sorry, file is too large. Please select one that is smaller than "+maxFileSize +' Mb'); $('.upload-file').val(null); } }); });