HTML5 AJAX 异步上传文件


html5 上传文件挺简单的 

方法1:

直接  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 id="file" accept="image/*" type="file" />

方法2:

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

 

原文链接:https://www.fedte.cc/p/429.html


另外可参考本人的一篇文章,关于html5上传部分:

struts2异步上传文件及前后端图片压缩上传

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值