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

jquery formData上传图片

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

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

姿势一、

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

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

姿势二、

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

摆好姿势,我们要发射啦

  1. $.ajax({
  2. type : "post", //提交方式
  3. url : 'image',//路径
  4. data: formData,
  5. processData:false, // 告诉jquery不要处理发送的数据
  6. contentType:false, // 告诉jquery不要设置请求头
  7. success : function(data) {
  8. if (data.success == 1 ) {
  9. $.toaster('上传成功',2);
  10. location.href = 'images';
  11. } else {
  12. $.toaster('上传失败',1);
  13. }
  14. }
  15. });
注意:这两个是必须的processData:false, contentType:false,否则jquery会处理我的数据,设置请求头,就会报错了。

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

原生的来了

  1. const xhr = new XMLHttpRequest();
  2. // 进度监听
  3. xhr.upload.addEventListener('progress', (e)=>{console.log(e.loaded / e.total)}, false);
  4. // 加载监听
  5. // xhr.addEventListener('load', ()=>{console.log("加载中");}, false);
  6. // 错误监听
  7. xhr.addEventListener('error', ()=>{Toast.error("上传失败!", 2000, undefined, false);}, false);
  8. xhr.onreadystatechange = function () {
  9. if (xhr.readyState === 4) {
  10. const result = JSON.parse(xhr.responseText);
  11. if (xhr.status === 200) {
  12. // 上传成功
  13. } else {
  14. // 上传失败
  15. }
  16. }
  17. };
  18. xhr.open('POST', '/uploadUrl' , true);
  19. xhr.send(formData);