大佬教程收集整理的这篇文章主要介绍了html5 FileReader,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
FileReader可以已异步的方式用来操作input元素选取的文件,拖拽操作获取的文件以及来自在一个HTMLCanvaSELER_834_11845@ent上执行mozGetAsFile()方法后的返回结果.
构造函数
FileReader()
属性列表
readyState三个状态
事件列表
方法列表
做些小实验
//HTML代码
<input type = "file" id = "myfile"/><br>
提示 : <p id = "tip"></p>
//javascript代码
var tip = document.querySELEctor("#tip");
var fileEle = document.querySELEctor("#myfile"); //输入框获取文件
var reader = new FileReader();
reader.onload = function(ev){ //读取完成触发
tip.innerText = "onload";
var result = reader.result;
tip.innerText = result ; //将文本内容读取<p>标签上
}
fileEle.onchange = function(){ //注册上传文件事件
var file = fileEle.files[0]; //获取文件对象file,file继承Blob对象
reader.readAsText(file,"UTF-8"); //已文本的方式读取
}
//HTML代码
<div class = "target" id = "target"></div>
//js代码
var target = document.querySELEctor("#target"); //获取目标位置
var reader = new FileReader();
var file = null ;
reader.onload = function(ev){ //读取文档,将图片显示在目标位置上
var result = reader.result;
var img = new Image();
img.src = result ;
target.appendChild(img);
}
target.addEventListener("drop",function(ev){ //当把图片拖放时候,读取文件
file = ev.dataTransfer.files[0];
reader.readAsDataURL(filE);
ev.preventDefault(); //阻止浏览器默认行文
});
利用readAsBinaryString将二进制文件上传到服务器
//HTML代码
<input type = "file" id = "myfile"/><br>
<button type = "button" id = "abort">停止上传</button><br>
提示 : <p id = "tip"></p>
//javascript代码
var tip = document.querySELEctor("#tip");
var btn = document.querySELEctor("#abort");
var fileEle = document.querySELEctor("#myfile"); //输入框获取文件
var reader = new FileReader();
var size = 0 ;
btn.onclick = function(){
reader.abort(); //停止读取文件,将触发abort和error事件
};
fileEle.onchange = function(){ //选择文件的事件
var file = fileEle.files[0];
size = file.size ; //获取文件大小,用来做进度提示
reader.readAsBinaryString(filE); //读取文件
}
reader.onabort = function(ev){
tip.innerText = "onabort";
}
reader.onerror = function(ev){
tip.innerText = "onerror";
}
reader.onload = function(ev){ //读取完成,这里利用jq的ajax
$.ajax({
url : "xxx",type : "post",data : {file,reader.result} //文件二进制数据
success : function(){
tip.innerText = "文件上传成功";
},error : function(){
tip.innerText = "文件上传失败";
}
});
}
reader.onloadend = function(ev){
tip.innerText = "onloadend";
}
reader.onloadstart = function(ev){
tip.innerText = "onloadstart";
}
reader.onprogress = function(ev){ //显示读取进度
tip.innerText = (reader.result.length / sizE) * 100 + "%";
}
利用readAsArrayBuffer,new Blob和createObjectURL 创建一个下载链接
//HTML代码
<input type = "file" id = "myfile"/><br>
//javascript代码
var fileEle = document.querySELEctor("#myfile"); //输入框获取文件
var reader = new FileReader();
reader.onload = function(ev){ //读取完成触发
var blob = reader.readAsArrayBuffer();
var _blob = new Blob([blob],{type,"image/png"}); //创建一个图片的bolb对像,装载数据
var url = Window.URl.createObjectURL(_blob); //创建一个图片路径
var a = document.createElement('a'); //创建一个a标签来下载
a.href = url ;
a.donwload = 'color.png';
a.textContent = 'Download color.png';
body.appendChild(a);
}
fileEle.onchange = function(){ //注册上传文件事件
var file = fileEle.files[0]; //获取文件对象file,file继承Blob对象
reader.readAsArrayBuffer(filE);
}
以上是大佬教程为你收集整理的html5 FileReader全部内容,希望文章能够帮你解决html5 FileReader所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。