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

jquery formData上传图片

发布于 2018-04-26 阅读 496 次 HTML5 Javascript
formaData 和jquery 联合起来过来上传图片了。 首先我们要先装子弹(获取数据),然后发射(发送请求)就OK了,我们用formData组装子弹 有好多方法造数据,就如同造人的方法也很多,什么试管啦, 各种姿势哈*-*,不要压抑你的想象力。 ![](http://image.w2le.com/95f74804f4831bb15fc0ef59603c4329) ####姿势一、 ```javascript //创建一个壳子 formData = new FormData(); //给壳子里放些五花八门的 //小幺鸡的名字 formData.append('name', 'XiaoYaoJi'); //放一张小幺鸡的美照 ``` ![](http://image.w2le.com/aacb447ba6d72c015f378b5dabc2dc1c) ``` formData.append('photo',file); //oh What is File . 从哪里来的呢呀 //小锅锅不要着急,看下面嘛 var file; $('input[file]').on('change',function(e){ file = e.target.files[0]; }) ``` ###姿势二、 ```javascript //我们也可以直接用一个form来初始化formData,就不用一个个早造了,可以一下就搞定 var formData = new FormData(document.forms[0]) //或者 var formData = document.forms[0].getFormData(); ``` ###摆好姿势,我们要发射啦 ![](http://image.w2le.com/f9be0144f5f533ca7b0c0272a9f43fac) ```javascript $.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会处理我的数据,设置请求头,就会报错了。 ####原生的也可以,不能有了试管就放弃自然生育啊 原生的来了 ```javascript 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); ```