当前位置:首页 > jquery formData上传图片

jquery formData上传图片

发布于 2018-04-26 阅读 418 次 HTML5 Javascript

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