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;  
};

HTML5 异步上传文件

标签：

原文地址：http://my.oschina.net/fuckBAT/blog/491056