jquery formData上传图片

formaData 和jquery 联合起来过来上传图片了。
首先我们要先装子弹（获取数据），然后发射（发送请求）就OK了，我们用formData组装子弹
有好多方法造数据，就如同造人的方法也很多，什么试管啦，
各种姿势哈-，不要压抑你的想象力。

姿势一、

//创建一个壳子
formData = new FormData();
//给壳子里放些五花八门的
//小幺鸡的名字
formData.append('name', 'XiaoYaoJi');
//放一张小幺鸡的美照

formData.append('photo',file);
//oh What is File . 从哪里来的呢呀
//小锅锅不要着急，看下面嘛
var file;
$('input[file]').on('change',function(e){
    file = e.target.files[0];
})

姿势二、

//我们也可以直接用一个form来初始化formData，就不用一个个早造了，可以一下就搞定
var formData = new FormData(document.forms[0])
//或者
var formData = document.forms[0].getFormData();

摆好姿势，我们要发射啦

$.ajax({
    type : "post",  //提交方式
    url : 'image',//路径
    data: formData,
    processData:false,   //  告诉jquery不要处理发送的数据
    contentType:false,   //  告诉jquery不要设置请求头
    success : function(data) {
        if (data.success == 1 ) {
            $.toaster('上传成功',2);
            location.href = 'images';
        } else {
            $.toaster('上传失败',1);
        }
    }
});

注意：这两个是必须的processData:false, contentType:false,否则jquery会处理我的数据，设置请求头，就会报错了。

原生的也可以，不能有了试管就放弃自然生育啊

原生的来了

const xhr = new XMLHttpRequest();
    // 进度监听
    xhr.upload.addEventListener('progress', (e)=>{console.log(e.loaded / e.total)}, false);
    // 加载监听
    // xhr.addEventListener('load', ()=>{console.log("加载中");}, false);
    // 错误监听
    xhr.addEventListener('error', ()=>{Toast.error("上传失败！", 2000, undefined, false);}, false);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            const result = JSON.parse(xhr.responseText);
            if (xhr.status === 200) {
                // 上传成功
            } else {
                // 上传失败
            }
        }
    };
    xhr.open('POST', '/uploadUrl' , true);
    xhr.send(formData);