android html5 input file,HTML5 文件API-input File

上传input

多文件上传 设置属性 multiple

限制上传文件的格式 属性 accept="image/jpeg" accept="text/html" image/*

FileList对象

是用户上传或者拖拽到浏览器的 文件的集合

可以通过 inputElement.files 来获取

是一个类数组对象 由File对象组成

File对象

属性 name

属性 size

属性 type

属性 lastModified

属性 lastModifiedDate

实例

FileList和File

function uploadFile(obj){

var str = "";

[].forEach.call(obj.files, function(file){

//用forEach()遍历类数组对象

str += "文件名 ："+file.name+"
";

str += "文件大小 ："+file.size+"
";

str += "文件类型 ："+file.type+"
";

str += "最后修改时间 ："+file.lastModifiedDate+"
";

str += "

---

";

});

document.getElementById("box").innerHTML = str;

}

FileReader

属性

result 读取结果

error 错误内容

readyState 读取状态

方法 (没有返回值)

readAsText() 把文件读取为文本

readyAsDataURL() 读取为base64图片编码

readyAsArrayBuffer() 读取为Buffer 数据类型

readyAsBinaryString() 读取为二进制字符串

abort() 终止读取操作

事件

onerror 读取错误时触发

onabort 读取中断时触发

onloadstart 读取开始时触发

onload 读取成功时触发

onloadend 读取结束时 不论成功或失败

onprogress 读取过程中多次触发

实例

FileReader

---

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);

}