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

【问题标题】：Prevent file input from changing with Javascript (JQuery)防止文件输入使用 Javascript (JQuery) 更改
【发布时间】：2020-07-12 01:35:16
【问题描述】：

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

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

  

      });

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

【问题讨论】：

您无法以这种方式实现您的要求。在change 事件触发之前，该文件已被选中。如果选择了无效文件，您需要修改逻辑以防止表单触发 submit 事件。
阻止提交文件。添加文件后，您无法停止添加文件...
为什么，一切都发生在客户端，当您检查文件大小时，文件已经添加到输入中。您应该阻止文件被上传，但实际上没有必要阻止用户在浏览器中添加文件

标签： javascript jquery html input

【解决方案1】：

如果要重置文件输入：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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);
      }
      

	});	
});

【讨论】：