前端开发 多个文件同时在页面中预览

前端开发包含哪些技术|前端开发项目源码|web前端项目开发实战源码

选中多个文件同时在页面中预览测试用例

主要用到的是FileReader类型,以及读取文件的两个方法,和一个属性,和三个事件即如下:

var reader = new FileReader();

//方法一(用于读取图片文件,并将文件以数据URI的形式保存在reader.result属性中):
reader.readAsDataURL(file);
//方法二 (以存文本的形式读取文件,并将读取到的文本存储到reader.result属性中):
reader.readAsText(file,encoding)//第二个参数用于指定编码类型,是可选的。
//属性一:
reader.result//读取到的文件数据都会存储到这个属性中
//事件一(是否发生了错误):
reader.onerror=function(){
//……
}
//事件二(是否读取了新数据):
reader.onprogress = function(event){
//event里边含有三个属性,event.lengthComputable、event.loaded(读取到的数据字节)、event.total(文件的总字节数)
//……
}
//事件三(是否已经读完了整个文件):
reader.onload = function(){
//…….
}

测试用例代码如下:

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>多选文件,同时展现预览</title>
</head>
<body>
    <input type=”file” multiple id=”fileBox”>
    <div id=”output”></div>
    <script>
        /**
         * 多选文件,同时展现预览
         */
        (function () {
            var fileNode = document.getElementById(‘fileBox’),
                output = document.getElementById(‘output’),
                type = ‘default’,
                html = ”,
                callback = null,
                events = null,
                reader = new FileReader();
            /**
             * 暴露了两个接口,events和callback
             * 当多选文件时,用于判断是否执行回调callback。
             * 暴露events是为了获取length值,知道到底选中了多少个文件
             * 暴露callback是为了,判断为多个文件时可以执行
             *
             * @param event
             */
            function handleEvent(event) {
                var files = event.target.files,
                    i = 0;
                events = event;
                callback = (function (i) {
                    return function (len) {
                        console.log(i);
                        //执行的次数等于总的读取文件次数,则返回
                        if (i == len) { return; }
                        if (/image/.test(files[i].type)) {
                            reader.readAsDataURL(files[i]);
                            type = “image”;
                        } else {
                            reader.readAsText(files[i], “UTF-8”);
                            type = “text”;
                        }
                        i++;
                    }
                })(i);
                callback();
            }
            //监听“change”事件
            fileNode.addEventListener(‘change’, handleEvent, false);
            //监听读取文件事件“error”,“progress”,“load”
            reader.addEventListener(‘error’, function () {
                console.log(“error”);
                output.innerHTML = “Could not read file, error code is” + reader.error.code;
            });
            reader.addEventListener(‘progress’, function (event) {
                console.log(“progress”);
                if (event.lengthComputable) {
                    output.innerHTML = event.loaded + “/” + event.total;
                }
            });
            reader.addEventListener(‘load’, function () {
                console.log(“load”);
                var len = events.target.files.length;
                switch (type) {
                    case “image”:
                        html += “<img src=\”” + reader.result + “\”>”;
                        break;
                    case “text”:
                        html += “<p>” + reader.result + “</p>”;
                        break;
                }
                output.innerHTML = html;
                if (len > 1) {//大于1说明,当选中多个文件时,执行回调函数callback
                    //这里给callback传入len是为了用于判断当执行次数等于len时(说明已经读取了所有选中的文件了),终止执行,因为文件数是从0算起的。
                    callback(len);
                }
            })
        })();
    </script>
</body>
</html>

前端开发的开源工具包有哪些|前端开发课程有哪些|前端开发 项目经理职位jd

» 本文来自:前端开发者 » 《前端开发 多个文件同时在页面中预览》
» 本文链接地址:https://www.rokub.com/4971.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!