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

Question

我试图通过 JQuery..

给定的文件名格式来检查文件名

这是我的代码：

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

我的JQuery脚本：

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..
});

但值 this_filename 似乎为空。我正在使用 blur，有什么可以用来检查 jQuery('#myfile').val() 的吗？

Answer 1

参见 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];

尝试利用 change 事件

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

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

Jquery checking the upload filename in file type input

jquery

file-upload

file