使用Javascript（JQuery）防止文件输入更改

Question

我试图阻止文件输入被更改，如果我有条件地告诉用户文件太大，但是即使捕获更改并防止默认，它仍然填充即：

  // 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;
        }



      });

这是我的代码，我做错了什么？

Answer 1

如果要重置文件输入：

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

Answer 2

如果条件不匹配，我建议重置输入类型=文件：

baz

另请注意，this.files [0] .size以字节为单位返回文件大小。因此，根据您的验证，您将不允许上传大小超过50字节的文件

Answer 3

下面的代码将检查文件大小，如果它超过阈值（maxFileSize），则会引发错误并重置文件上传对话框。这样可以防止进一步处理文件，例如，如果您在提交表单之前以某种方式处理文件。

$(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);
      }
      

	});	
});