ファイルアップロードフォーム、ファイル条件を添付

Question

ファイルサイズを確認するためにjqueryバリデータ付きのファイルアップロードフォームがあります。 Validatorが起動すると、適切な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 = ''。選択したファイル入力値がクリアされます。要件ごと

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

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

変更ファイルのサイズ。私はテストのために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道のビットがこれを行うには：変更_after_

$('#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