HTML5 异步上传文件

    最近公司要做手机端网站  要用到图片上传，  手机端一般不能用 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;
};

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