Ajax 之文件上传
FormData
简单的上传例子
/* 先在 html 里面准便好 <input class="file-input" tpye="file" /> 标签 */ var fileInput = document.querySelector('.file-input'); var formData = new FormData(); //添加 formData 上传文件 fileInput.onchange = function(e){ formData.append("fileIn", this.value); } //上传文件 var request = new XMLHttpRequest(); request.open("POST", "/ajax.php"); request.send(formData);
解读步骤
fileInput
的dom
对象获取,FormData
对象生成;- 使用
fileInput
的onchange
事件来获取,文件的内容; - 使用
FormData
的append
方法来添加一个新值到FormData
里面来; - 使用
XMLHttpRequest
的send
的方法来上传文件;
原理说明
FormData
对象其实不止是可以用来上传文件,如同其名,可以模拟一系列表单控件的键值对,然后用于 XMLHttpRequest
的提交,其最大的优点就是可以异步上传一个二进制文件;
FormData
是无法读取文件的,其核心就是通过 append()
,将文件变成新增字段,来上传文件;
FileReader
简单的读取文件例子
/* 先在 html 里面准便好 <input class="file-input" tpye="file" /> 标签 */ var fileInput = document.querySelector('.file-input'); // 创建 FileReader 对象 var fileReader = new FileReader(); fileInput.onchange = function(e){ // 获取原声 File 对象 var file = event.target.files[0]; // 以二进制读取文件对象 fileReader.readAsArrayBuffer(file); //fileReader.readAsDataURL(file); // 以data:URL 格式的字符串以表示读取文件的内容 //fileReader.readAsText(file); //以字符串形式表示读取到的文件内容 } // 读取操作完成后 fileReader.onload = function (e) { console.log(e) }
解读步骤
- 创建
FileReader
对象; - 通过
fileInput
的dom
对象onchange
的方法, 获取原始File
对象; - 通过
FileReader
中其中一种读取方式,读取原始File
对象; - 通过
FileReader
的onload
方法获取来继续读取完成后的操作;
原理说明
一般来说,读取文件应用场景应该是需要作断点续存的时候,或者想要预览上传的图片;
预览图片例子
var fileInput = document.querySelector('.file-input'); var imgSrc = document.querySelector('.img') // 创建 FileReader 对象 var fileReader = new FileReader(); fileInput.onchange = function(e){ // 获取原声 File 对象 var file = event.target.files[0]; fileReader.readAsDataURL(file); // 以data:URL 格式的字符串以表示读取文件的内容 } // 读取操作完成后 fileReader.onload = function (e) { console.log(e) imgSrc.src = e.target.result }
由于本人使用 FileReader
得并不多,所以这里不作详细讨论了,有兴趣的同学可以,直接去看MDN文档
总结
虽然上传文件很早就尝试过了,但是当时理解并不是很深入,而且加上最近几次在这方面知识的打击,有点不太能认了;
感谢 白白 的几次指导,(指导了好几次,本人还是忘了)
感谢 MDN 提供的文档给予我一定的灵感
感谢阅读,欢迎指出文章的不足之处,以及讨论更多的代码优化
原文站点 时之物语
原文链接 Ajax 之文件上传
相关推荐
Chydar 2019-07-01
qsdnet我想学编程 2020-06-09
huzijia 2020-06-09
pythonclass 2020-06-07
李永毅 2020-06-03
风萧萧梦潇 2020-05-12
cuiwenjie 2020-04-18
码墨 2020-02-14
chouliqingke 2020-02-13
在新项目中使用的是springboot编写的api,涉及到ajax跨域请求和传输文件的问题,在这里记录一下。<input type="button" onclick="test();" value="
daicj 2019-12-25
nxcjh 2020-01-03
fanhuasijin 2019-12-15
zhouhaihua00 2019-12-15
小仙儿 2019-12-01
maidou0 2019-10-19
数据中心运维管理 2019-11-17
81493369 2019-11-04
李永毅 2019-10-29
mmywcoco 2019-10-28