如何通过jQuery将Input File的图片文件传输至PHP后端？

我尝试通过jQuery的$.ajax()方法，将HTML页面中<input type="file">元素获取到的图片传输至UserAjax.php，但仅能获取到图片名称的字符串。尝试直接传输File对象时出现TypeError: Illegal invocation错误；尝试使用this.files[0].val()时，提示该方法不存在。希望实现图片本身或其Base64编码的传输以进行后续处理。

最初的JS代码 #

$(document).on('change' , '#defined_avatar_file' , function(){
    filename = this.files[0];
    // console.log(this.files[0]);
    // console.log(this.files[0].val());
    var datas = {
        file_avatar : filename,
        // file : this.files[0],
    }

    $.ajax({
        url : 'index.php?action=modify-avatar-file',
        type : 'POST',
        data : datas,
        success : function(){

        }
    })
});

解决方案 #

感谢ADyson的帮助，以下是可行的解决方案：

修改后的JS代码 #

$(document).on('change' , '#defined_avatar_file' , function(){
    var formData = new FormData();
    formData.append('file', $('#defined_avatar_file')[0].files[0]);
    $.ajax({
       url : 'index.php?action=modify-avatar-file',
       type : 'POST',
       data : formData,
       processData: false,  // 告诉jQuery不要处理数据
       contentType: false,  // 告诉jQuery不要设置contentType
       success : function(data) {
           console.log(data);
       }
    });
});

PHP端接收方式 #

该代码通过FormData对象传输文件，PHP端可通过$_FILES全局数组接收，示例代码如下：

var_dump($_FILES['file']['name']);
var_dump($_FILES['file']['size']);
// 其他文件相关操作...

内容的提问来源于stack exchange，提问作者JoKa