HTML5 fileReader用法

相关API

1.文件拖拽事件

• ondragover -> 只要悬浮，一直触发
• ondragenter -> 进入时触发，有子节点时有问题
• ondragleave -> 离开时触发，有子节点时有问题
• ondrop -> 释放鼠标时触发，对应DOM节点的dragover事件必须取消默认事件

2.File接口

• var reader = new FileReader(); 新建文件读取对象
  调用对象方法
• .readAsText(file) -> 读取文本文件
• .readAsDataURL(file) -> 将文件读取为 DataURL(二进制流形式)
• .readAsBinaryString -> 将文件读取为 二进制编码

3.处理事件

• .onload -> 资源读取完毕 reader.result
• .onprogress -> 读取进度更新时触发
• .onloadstart -> 加载开始时触发
• .onloadend -> 加载结束时触发
• .onerror -> 出现错误时触发
• .onabort -> 加载过程中中止时触发
• .abort -> 手动中止加载

代码实现

HTML部分

    <input type="file" id="input_file"/>
    <div id="result" style="width: 100px;height: 100px;border: 1px solid #E1E1E1;"></div>
    <div id="box" style="width: 400px;height: 100px;border: 1px solid #E1E1E1;"></div>

Javascript

    var input=document.getElementById("input_file");
        var result=document.getElementById("result");
        if (window.FileReader) {
            input.addEventListener("change",imageUpload,false);
        } else{
            alert("浏览器不支持fileReader")
        }
      //普通上传图片
        function imageUpload () {
            var file = this.files[0];
            var reader = new FileReader();
            if(!/image\/\w+/.test(file.type)){
                alert("请确保文件为图像类型");
                return false;
            }
            reader.readAsDataURL(file);
            reader.onload = function(ev) {
                console.log(this.result);//二进制流
                result.innerHTML='![]('+this.result+')'
            }
        }

        //拖拽上传图片或处理文本或者多媒体(图片  音频 视频)
        var oBox=document.getElementById("box");
            oBox.ondrop=function  () {
                var file = this.files[0];
                var reader = new FileReader();
                if (/txt/.test(file.type)) {
                    reader.readAsText(file);
                    reader.onload = function(ev) {
                    console.log(this.result);
                       document.write(this.result) 
                    }
                } else{
                    reader.readAsDataURL(file);
                    if (/iamge/.test(file.type)) {
                        reader.onload = function(ev) {
                           console.log("image");
                           var oImg=new Image();
                           oImg.src=this.result;
                           document.body.appendChild(oImg);
                        }
                    }
                    if (/video/.test(file.type)) {
                        reader.onload = function(ev) {
                           console.log("video");
                           new Video(this.result).play();
                        }
                    }
                    if (/audio/.test(file.type)) {
                        reader.onload = function(ev) {
                           console.log("audio")
                           new Audio(this.result).play();
                        }
                    }
                }
            }

以上为HTML5 fileReader用法，内容不多理解较为容易，不再赘述。