file API
客户端直接访问用户计算机的文件,2000以前,在表单添加了<input type="file">字段.
file API是为給web开发提供安全的方式,以便在客户端更好访问用户的文件,字段的基础上加
了一些直接访问文件信息的接口-files集合.与fileReader类型读取文件的数据.
files集合
name: 本地文件的名称
size: 文件的字节大小
type: 字符、文件的MIME类型
lastModifiedDate: 文件上次修改的时间(chrome实现了这属性)
fileReader类型
readAsText(file, encoding): 以纯文本的方式读取文件.
readAsDataURL(file): 读取文件并以URL的形式保存在result属性中.
readAsBinaryString(file): 读取文件并将一个字符串将保存在result属性中,一个字符
为一个字节.
readAsArrayBuffer(file): 读取文件并将一个包含文件内容的ArrayBuffer保存在
result属性中.
(file-文件集合; encoding-编码类型)
事件
由于数据是异步读取.因此fileReader提供了几种事件.
progress事件: 每～50ms,便触发一次.
error事件: 但文件无法读取就会触发,有个属性error.code属性.1表示未找到文件,2表示
安全性错误,3表示读取中断,4表示文件不可读,5表示编码错误.
load事件: 触发但文件完整读取后.
中断了还会触发abort事件,在load、error事件后还会触发loadend事件.
栗子
当用户上传完图片之后,可在页面立即显示.//html
<label for="file">
<input type="file" name="file" id="file" accept="image/*">
<span id="output"></span>
</label>
//js
function showFileImg(ele, dist){
const filesList = document.querySelector(ele);
const output = document.querySelector(dist);
filesList.addEventListener(‘change‘, function(event) {
//实例fileReader对象
const reader = new FileReader();
//获取文件集合
let files = event.target.files[0];
if(/image/.test(files.type)){
//读取文件并通过URL类保存在result里
reader.readAsDataURL(files);
//事件
reader.onload = function(){
//获得图片数据并插进显示节点
let html = ‘<img src=‘ + reader.result + ‘>‘;
output.innerHTML = html;
}
} else {
return false;
}
});
}
const fileImgA = new showFileImg(‘#file‘, ‘#output‘);读取拖放文件,在创建自定义的位置,当用户把文件拖放进自定义位置后,显示文件信息.//html
<div id="drop_zone">Drop files here</div>
<output id="output"></output>
//js
function dropFile() {
const droptarget = document.querySelector(‘#drop_zone‘);
const output = document.querySelector(‘#output‘);
//文件信息
let info = ‘‘;
function handleEvent(event) {
event.preventDefault();
let files, i, len;
if(event.type == ‘drop‘) {
let files = event.dataTransfer.files;
let i = 0;
let len = files.length;
//遍历文件比放入显示节点
while(i < len){
info += files[i].name + ‘(‘ + files[i].type + ‘,‘ + files[i].size + ‘)<br/>‘
i++;
}
output.innerHTML = info;
}
}
droptarget.addEventListener(‘dragenter‘, handleEvent);
droptarget.addEventListener(‘dragover‘, handleEvent);
droptarget.addEventListener(‘drop‘, handleEvent);
}
dropFile();使用XHR上传文件
//html
<label for="file">
<input type="file" name="file" id="file">
</label>
<button id="sendFile">提交</button>
//js
function xhrFile(){
const file = document.querySelector(‘#file‘);
const sendFile = document.querySelector(‘#sendFile‘);
//文件信息
let files;
//获得文件信息
function getFileInfo(event){
let files = event.target.files[0];
};
//发送xhr
function sendFileXhr(event){
//实例对象
let data = new FormData();
let i = 0;
let len = files.length;
//遍历文件信息
while(i < len){
data.append(‘file‘ + i, files[i]);
i++;
}
//实例请求对象
let xhr = new XMLHttpRequest();
xhr.open(‘post‘, ‘......php‘, true);
//请求成功打印放回信息
xhr.onreadystatechange = function() {
if(xhr.readystate === 4){
alert(xhr.responseText);
}
}
xhr.send(data);
};
}
xhrFiles()对象formData可通过键值模拟一系列的表单,通过xhr的send提交数据.
formdata append
new FormData(form? : HTMLFormElement);
给这对象加键值
append(name, value, filename);
name: 字段名称
value: 字段数值
filename: 文件的文件名(可选).