Question

我有一个带有jquery验证器的文件上传表单来检查文件大小。验证器触发，我有一个正确的IF语句，但如何防止文件被附加？我认为返回可以解决问题，但是文件仍然“附加”到上传按钮（文件名旁边会出现）。

 $('#fileUploadButton').on('change', function() {
        var fileSizeInBytes = this.files[0].size;
        if(fileSizeInBytes>512000){
            alert("this file is to big!");
            return;
        }else{
            //generate preview
        }
  });

Answer 1

请检查下面提到的解决方案。

$('#fileUploadButton').on('change', function() {
        var fileSizeInBytes = this.files[0].size;
        if(fileSizeInBytes>512000){
            alert("this file is to big!");
            // Reset file input
            $('input[type="file"]').val(''); 
            // OR
            $('#input_file_id').val('');   
            return;
        }else{
            //generate preview
        }
  });

Answer 2

使用$(this).val('');或this.value = ''。它将清除文件输入的选定值。

＆＃13;

$('#fileUploadButton').on('change', function(e) {
        var fileSizeInBytes = this.files[0].size;
        if(fileSizeInBytes>100){
            alert("this file is to big!");
            $(this).val(''); //or this.value = '';
            return;
        }else{
            //generate preview
        }
  });

＆＃13;

  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  <input type="file" id="fileUploadButton" />

＆＃13;

根据要求更改文件大小。我已经添加了100个用于测试。

Answer 3

只需清除文件输入的值：

$('#fileUploadButton').on('change', function() {
    var fileSizeInBytes = this.files[0].size;
    if (fileSizeInBytes > 512000){
        alert("this file is to big!");
        $(this).val('');

        return;
    } else {
        //generate preview
    }

}）;

Answer 4

还有一些纯粹的js方法可以做到这一点：

$('#fileUploadButton').on('change', function() {
        var fileSizeInBytes = this.files[0].size;
        if(fileSizeInBytes>512000){
            alert("this file is to big!");
            //pure js input reset
            document.getElementById(this.id).value = ''; 
            return;
        }else{
            //generate preview
        }
  });

Here is js fiddle

文件上传表单，附加文件条件

4 个答案: