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>
网友评论