基于JQuery的AJAX异步文件上传方法

对于许多初学者而言，上传表单很容易，但上传文件就麻烦了。

这里给出一个简单的方法，供参考。

HTML部分

<form action="/" method="post" enctype="multipart/form-data">
    <input id="file" name="file" type="file" accept=".jpg,.png,.jpeg,.gif" onchange="uploadImg()">
</form>

谨记：action可以留空，enctype要设为“multipart/form-data”

Javascript部分

function uploadImg(e) {
    let file=$("input[name='file']").prop("files")[0];//使用JQuery方法获得文件，记住最后一定要加[0]，否则得到的必然是[Object filelist]
    let url="你的上传地址";
    const formData = new FormData();//建立FormData用来传输数据
    formData.append("file",file);
    $.ajax({
        url:url,
        type:'POST',
        async: false,
        data: formData,
        dataType:'json',
        cache: false, // 上传文件无需缓存
        processData : false, // 使数据不做处理
        contentType : false, // 不要设置Content-Type请求头
        success: function(data){
            console.log(data);//打印返回的参数
            if (data.status == 'OK') {
            }
        },
        error:function(response){
            console.log(response);
        }
    });
}

PHP部分

var_dump($_FILES)

如果不出意外，你的前端就会把上传文件的信息从控制台打印出来了。