HTML5 文件API-input File

上传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>

HTML5 文件API-input File

上传input

FileList对象

File对象

实例

FileReader

属性

方法 （没有返回值）

事件

实例

推荐阅读更多精彩内容

方法（没有返回值）