H5新增内容

2017-07-18 本文已影响0人 what__

FIleReader文件读取API

input 给input标签添加multiple属性,就可以选择多个文件

file对象

lastModified:1496884474143     //(毫秒)
lastModifiedDate:Thu Jun 08 2017 09:14:34 GMT+0800 (中国标准时间)
name:"js初级回顾.txt"        //文件名
size:0                     //文件大小
type:"text/plain"        //文件类型

FileReader使用方式:

1.构建FileReader实例
2.选择要是用的读取方式,如 readAsDataURl() 将文件对象传递给该方法
3,监听读取完成的事件 onload ,通过 this.result 得到读取结果
4,其他事件监听

读取方式

fr.readAsDataURL(files);//接收参数是文件对象
fr.readAsText(files); 以文本方式读取选中文件
fr.readAsBinaryString(files); 以二进制的方式读取文件

input事件

onload 读取完成
onloadstart 开始读取
onloaddend 结束读取无论成功失败都会触发
onerror 错误触发
onabort 中断读取时触发

abort() 中断读取

drag

draggable="true"
表示允许拖拽

添加即为ture的属性有:

disabled     checked     multiple    selected  
draggable(允许元素被拖拽)  contenteditable(允许元素可被编辑)

不支持IE7,8

浏览器默认禁止在元素上drop (禁止将其他元素拖拽到目标元素上放手)
需要在dropover时阻止浏览器的默认事件,才得以触发ondrop.

拖拽的生命周期

 dragstart---drag---dragenter---dragover---dragleave---drop---drapend

<body>
    <input type="file" name="" id="myFile" multiple>
</body>
<script type="text/javascript">
    var input=document.querySelector("#myFile");
    input.onchange = function(){
        console.log(this.files);     //FileList {0: File, length: 1}
        for(var i=0;i<this.files.length;i++){
            var files = this.files[i];
            console.log(files);
            var fr = new FileReader();  //使用FileReader来读取文件
            //fr.readAsDataURL(files);  //读取文件地址  base64格式
            fr.readAsText(files);  //以文本格式读取文件
            //fr.readAsBinaryString(files);   //以二进制格式读取
            fr.onload = function(){
                console.log(this.result);
                var img = new Image();
                img.src = this.result;
                document.body.appendChild(img);
                //将选中的img显示在网页上.
        }
    }
}
</script>