档案上载表格，附上档案条件

Question

I have a file upload form with jquery validator to check a file size. Validator fires, I have a proper IF statement, but how to prevent a file from being attached? I thought return would do the trick, but a file is 'attached' to the upload button anyways (a file name appears next to it).

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

Please check below mentioned solution.

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

Use $(this).val(''); or this.value = '' . It will clear the selected value for file input.

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

Change file size as per requirement. I have added 100 for testing.

Answer 3

Just clear the file input's value:

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

And a bit of pure js way to do this:

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