HTML5 异步上传文件

来源：互联网发布：俊知集团官网编辑：程序博客网时间：2024/06/07 01:03

最近公司要做手机端网站要用到图片上传，手机端一般不能用 swfupload 类似flash的上传工具 (对 flash 支持不好) 不过现在手机浏览器都支持HTML5了所以这几天网上查了下实现使用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;};

今天先说到这里吧继续忙了

2 0