FileReader() realizes file upload
The attributes of the input file
- accept [əkˈsept] Selectable file types such as: "image/*"
- multiple [ˈmʌltɪpl] allows the user to select multiple files. The
selected file collection
FileList
0:File
name: “1.png”
size: 994567
type: “image/png”
length:1
File reading class
FileReader.readAsDataURL
FileReader.readAsArrayBuffer
FileReader. readAsText
FileReader.onload
example
<input type="file" multiple id="uploadInp">
<img src="" alt="" id="abbreImg" width="300">
<script>
let uploadInp = document.querySelector('#uploadInp'),
abbreImg = document.getElementById('abbreImg');
uploadInp.onchange = function () {
// FileList 文件集合「类数组」
// 每一项就是选择的文件 File
// + name
// + size
// + type
let file = this.files[0];
if (!file) return;
/* if (file.size > 1024) {
alert('上传的图片必须在1KB以内');
return;
} */
/* if (!/(jpg|jpeg|gif|png)/i.test(file.type)) {
alert('必须上传PNG/JPG/GIF格式的图片!')
return;
} */
// FileReader 文件读取类(异步读取)
let reader = new FileReader;
reader.readAsDataURL(file);
reader.onload = function (ev) {
// ev.target.result 读取出来的BASE64
// reader.reuslt 读取出来的BASE64
abbreImg.src = ev.target.result;
};
};