FormData以及原生Ajax上传图片
Ajax对于表单提交来说,是一个很好的工具,他提供了异步提交的效果,这使得用户提交表单时不需要刷新页面就可获知提交成功与否,但一直以来,网上的示例大都是JQuery上传的教程,原生Ajax似乎并不受大家热爱,更别提原生Ajax上传图片的教程了,本篇将为你讲述JavaScript中使用FormData上传文件的教程 FormDataFormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。比起早先的Ajax,发送FormData的Ajax不仅可以发送图片,更好的一点是我们无需设置 用法我们可以使用表单来构造一个FormData对象,也可以创建一个空的FormData对象,之后手动添加一些数据进去。 使用表单构造FormData对象。做法很简单,使用 <form id="formA" method="POST" action="/upload" enctype="multipart/form-data">
<input type="text" name="username" id="username">
<input type="file" name="pic" id="pic" multiple="multiple">
<input type="button" value="FormData提交一个Form" onclick="sub1()">
</form>
function sub1() {
let form = document.getElementById('formA');
let data = new FormData(form);
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status==200){
alert(xhr.responseText);
}
};
xhr.open('POST','/upload');
xhr.send(data)
}
空的FormData对象&添加数据这个也很简单,添加数据方法的第一个参数是数据的名字,第二个参数是数据的值。如下: <form id="formA" method="POST" action="/upload" enctype="multipart/form-data">
<input type="text" name="username" id="username">
<input type="file" name="pic" id="pic" multiple="multiple">
<input type="button" value="FormData添加数据后提交" onclick="sub2()">
</form>
function sub2() {
let username = document.getElementById('username');
let pics = document.getElementById('pic');
let data = new FormData();
data.append('username',username.value);
for(let pic of pics.files){
data.append('pic',pic);
}
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status==200){
alert(xhr.responseText);
}
};
xhr.open('POST','/upload');
xhr.send(data)
}
如果一个文件上传框可以上传多个文件,那么得将这些文件分别添加进FormData,注意他们的名字是一样的。 结果是一样的: 源代码后台是用python flask写的 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- XML笔记-xml解析与加载
- FlashPlayer9和AVM2的弹性跑道模型
- c# – 实体框架SQL查询不返回结果
- 为什么C++ map容器emplace()、emplace_hint()的执行效率比i
- net.sf.json.JSONException: There is a cycle in the
- XML fragments parsed from previous mappers already cont
- windows下vue-cli及webpack搭建安装环境
- swift 2.0 数组
- C#提高随机数不重复概率的种子生成方法
- ruby-on-rails – 当它“挂断”或没有响应时,如何推送到Her