HTML5 文件API-input File
2017-06-10 本文已影响4891人
飞鱼_JS
上传input
- 多文件上传 设置属性 multiple
- 限制上传文件的格式 属性
accept="image/jpeg"accept="text/html"image/*
FileList对象
- 是用户上传或者拖拽到浏览器的 文件的集合
- 可以通过 inputElement.files 来获取
- 是一个类数组对象 由File对象组成
File对象
- 属性 name
- 属性 size
- 属性 type
- 属性 lastModified
- 属性 lastModifiedDate
实例
<body>
<h1>FileList和File</h1>
<input type="file" multiple onchange="uploadFile(this)">
<div id="box"></div>
<script>
function uploadFile(obj){
var str = "";
[].forEach.call(obj.files, function(file){
//用forEach()遍历类数组对象
str += "文件名 ："+file.name+"<br>";
str += "文件大小 ："+file.size+"<br>";
str += "文件类型 ："+file.type+"<br>";
str += "最后修改时间 ："+file.lastModifiedDate+"<br>";
str += "<hr>";
});
document.getElementById("box").innerHTML = str;
}
</script>
FileReader
属性
- result 读取结果
- error 错误内容
- readyState 读取状态
方法 （没有返回值）
- readAsText() 把文件读取为文本
- readyAsDataURL() 读取为base64图片编码
- readyAsArrayBuffer() 读取为Buffer 数据类型
- readyAsBinaryString() 读取为二进制字符串
- abort() 终止读取操作
事件
- onerror 读取错误时触发
- onabort 读取中断时触发
- onloadstart 读取开始时触发
- onload 读取成功时触发
- onloadend 读取结束时 不论成功或失败
- onprogress 读取过程中多次触发
实例
<h1>FileReader</h1>
<hr>
<input type="file" onchange="uploadFile(this)">
<div id="box"></div>
<script>
function uploadFile(obj){
//获取file对象
var file = obj.files[0];
//创建FileReader对象
var fr = new FileReader();
//判断文件的类型
if (file.type.match(/^text\//) !== null) {
//读取文本文件
readText(fr, file);
} else if (file.type.match(/^image\//) !== null) {
//读取图片
readImage(fr, file);
} else {
alert("你上传的文件格式无法读取");
}
}
/**
* 读取图片
* @param FileReader frObj
* @param File fileObj
*/
function readImage(frObj, fileObj) {
frObj.onload = function(){
var img = document.createElement("img");
img.src = frObj.result;
document.querySelector("#box").appendChild(img);
}
frObj.readAsDataURL(fileObj);
}
/**
* 读取文本
* @param FileReader frObj
* @param File fileObj
*/
function readText(frObj, fileObj) {
frObj.onload = function(){
var pre = document.createElement("pre");
pre.innerHTML = frObj.result;
document.querySelector("#box").appendChild(pre);
};
frObj.readAsText(fileObj);
}
</script>
