jQuery检查文件类型输入中的上传文件名

Question

I was trying to check the filename by the filename format given using JQuery..

this is my code:

<input class="" name="myfile" id="myfile" type="file" multiple="false" data-value="">

my JQuery Script:

function checkFileName(filename, file_id){
    var must_filename;

    must_filename = jQuery(file_id).attr('data-value').split('.').slice(0, 2).join('.');
    jQuery('.file_err_det').remove();
    alert(must_filename + ' != ' + filename);
    // filename value is always null?
    if(must_filename != filename){          
        alert('Filename is not valid! Please follow the format and upload it again');
        jQuery(file_id).val('');
    }
}

jQuery('#myfile').blur(function() {
    var this_filename = jQuery(this).val().split('.').slice(0, 2).join('.');
    checkFileName(this_filename, '#myfile');
    alert(this_filename); // this returns null? I dont know why..
});

but it seems the value this_filename is null. I am using blur , is there anything that I can use to check the jQuery('#myfile').val() ?

Answer 1

See Using files from web applications

The File API makes it possible to access a FileList containing File objects representing the files selected by the user.

If the user selects just one file, it is then only necessary to consider the first file of the list.

Accessing one selected file using a classical DOM selector:

var selectedFile = document.getElementById('input').files[0];

Accessing one selected file using a jQuery selector:

var selectedFile = $('#input').get(0).files[0];

var selectedFile = $('#input')[0].files[0];

---

Try utilizing change event

 $("#myfile").on("change", function(e) { var file = e.target.files[0]; console.log(file, file.name); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <input class="" name="myfile" id="myfile" type="file" multiple="false" data-value="">