HTML5 文件API-input File

最新推荐文章于 2024-07-12 09:12:08 发布

Full Stack Developme

最新推荐文章于 2024-07-12 09:12:08 发布

阅读量449

点赞数

分类专栏：前端知识文章标签： html5

前端知识专栏收录该内容

19 篇文章 0 订阅

订阅专栏

转载自：https://www.jianshu.com/p/c619b81e8f04

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

作者：飞鱼_JS
链接：https://www.jianshu.com/p/c619b81e8f04
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

Full Stack Developme

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 文件API-input File

转载自：https://www.jianshu.com/p/c619b81e8f04上传input多文件上传设置属性 multiple 限制上传文件的格式属性 accept="image/jpeg" accept="text/html" image/*FileList对象是用户上传或者拖拽到浏览器的文件的集合可以通过 inputElement.files 来获取 ...
复制链接

扫一扫

专栏目录