Ajax 之文件上传

这个应该是用来做菜的~

FormData

简单的上传例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*
先在 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);

解读步骤

  1. fileInputdom 对象获取, FormData 对象生成;
  2. 使用 fileInputonchange 事件来获取,文件的内容;
  3. 使用 formDataappend 方法来添加一个新值到 formData 里面来;
  4. 使用 XMLHttpRequestsend 的方法来上传文件;

原理说明

FormData 对象其实不止是可以用来上传文件,如同其名,可以模拟一系列表单控件的键值对,然后用于 XMLHttpRequest 的提交,其最大的优点就是可以异步上传一个二进制文件;

FormData 是无法读取文件的,其核心就是通过 append(),将文件变成新增字段,来上传文件;

FileReader

简单的读取文件例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/*
先在 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)
}

解读步骤

  1. 创建 FileReader 对象;
  2. 通过 fileInputdom 对象 onchange 的方法, 获取原始 File 对象;
  3. 通过 FileReader 中其中一种读取方式,读取原始 File 对象;
  4. 通过 FileReaderonload 方法获取来继续读取完成后的操作;

原理说明

一般来说,读取文件应用场景应该是需要作断点续存的时候,或者想要预览上传的图片;

预览图片例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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 提供的文档给予我一定的灵感

感谢阅读,欢迎指出文章的不足之处,以及讨论更多的代码优化