博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5 异步上传文件
阅读量:6911 次
发布时间:2019-06-27

本文共 1288 字,大约阅读时间需要 4 分钟。

hot3.png

 其实 html5 上传文件挺简单的 , 直接  new FormData(); 这个基于XMLHttpRequest 2  新增的API 就好了 

   你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段,如下:

  
  var oMyForm = new FormData();     oMyForm.append("username", "Groucho");  oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"     // fileInputElement中已经包含了用户所选择的文件  oMyForm.append("userfile", document.ElementById('file').files[0]);    oMyForm.append("webmasterfile", oBlob);     var oReq = new XMLHttpRequest();  oReq.open("POST", "__URL__/api/upload");  oReq.send(oMyForm);  

这样就实现了 往后端上传文件 

当然你也可以在 file 里面设置 只允许上传图片  accept 属性

如果你用 jquery 那么也可以在jquery 里面实现

vm.save = function(){      var data = new FormData();      data.append('a_id', model.a_id);      data.append('name', model.name);      data.append('sort', model.sort);      data.append('file', $('#aaa')[0].files[0]);      $.ajax({          url: '__URL__/picSave',          type: 'POST',          data: data,          processData: false,  // 告诉jQuery不要去处理发送的数据          contentType: false  // 告诉jQuery不要去设置Content-Type请求头      }).done(function(ret){          if (ret) {              alert(ret);          }else{              alert('保存成功!');              //location = '__URL__';          }      });      return false;  };

转载于:https://my.oschina.net/fuckBAT/blog/491056

你可能感兴趣的文章
名词解释
查看>>
意见汇总
查看>>
软件架构设计学习总结(5):软件架构学习小结
查看>>
bzoj1293[SCOI2009]生日礼物
查看>>
取文本里的文本转Json(记录)
查看>>
lnmp环境部署
查看>>
Entity Framework Code-First(9.4):DataAnnotations - Required Attribute
查看>>
Linux crm 运行
查看>>
利用View静态画图
查看>>
Spring MVC
查看>>
不错的资源哦
查看>>
多线程概念
查看>>
emqttd 2.2安装和测试使用
查看>>
Objective-C之优雅的命名
查看>>
php output_buffering 缓存使用
查看>>
深度学习和神经网络的区别是什么
查看>>
Decorator模式
查看>>
每日练习
查看>>
LeetCode算法题-First Unique Character in a String(Java实现)
查看>>
【小程序】小程序开发自定义组件的步骤>>>>>>>>>小程序开发过程中报错:jsEnginScriptError...
查看>>