html选择文件上传ajax,HTML5 AJAX 异步上传文件

html5 上传文件挺简单的 ， 直接  new FormData(); 这个基于XMLHttpRequest 2  新增的API 就好了

你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段，如下：

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

这样就实现了 往后端上传文件

当然你也可以在 file 里面设置 只允许上传图片 accept 属性

如果你用 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;

};

如果你觉得这篇文章不错或者对你有帮助，想请我喝一杯咖啡，可以打赏