HTML5实现异步上传(不用uploadify等前端上传插件)

来源:互联网 发布:淘宝违规12分 编辑:程序博客网 时间:2024/05/22 02:28

手机端一般不能用 swfupload 类似flash的上传工具 (对 flash 支持不好) 不过现在手机浏览器 都支持HTML5了, 实现使用Html5 上传文件 ,直接 new FormData(); 这个基于XMLHttpRequest 2 新增的API ,你可以先创建一个空的 FormData 对象,然后使用 append(),方法向该对象里添加字段,如下:

<input type="file" id="file" />  <script type="text/javascript">  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);  </script>

这样就实现了 往后端上传文件 当然你也可以在 file 里面设置 只允许上传图片 accept 属性

<input type="file"  id="file" accept="image/*" />

如果你用 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;  };
原创粉丝点击