您好,欢迎访问一九零五行业门户网

使用html5的FormData对象,通过 Ajax表单异步提交文件数据

每次在向服务器提交文件对象数据是,总是需要借助各种三方插件来实现表单异步提交功能,还要为不同的界面去定制不同的插件css,相当繁琐。xmlhttprequest level 2 添加了一个新的接口——formdata。利用 formdata 对象,我们可以通过 javascript 用一些键值对来模拟一系列表单控件,我们还可以使用 xmlhttprequest 的 send() 方法来异步的提交表单。与普通的 ajax 相比,使用 formdata 的最大优点就是我们可以异步上传二进制文件。
话不多说直接上代码:
var formdata = new formdata(); formdata.append('template', that.template); formdata.append('declare', that.declaredata.declare); formdata.append('self_intro', that.declaredata.self_intro); formdata.append('plan_name', that.declaredata.plan_name); //$("#business_plan") 是一个file类型的input对象 formdata.append('business_plan', $("#business_plan")[0].files[0]); var xhr = new xmlhttprequest(); xhr.open('post', url, true); xhr.setrequestheader("accept", "application/json"); xhr.send(formdata); // 指定通信过程中状态改变时的回调函数 xhr.onreadystatechange = function () { // 通信成功时,状态值为4 var completed = 4; if (xhr.readystate === completed) { if (xhr.status === 200) { // 处理服务器发送过来的数据 var result = json.parse(xhr.responsetext); //这里你可以随意的处理这个result对象了 //... } else {// 处理错误 alert('连接超时'); } } };
其它类似信息

推荐信息