H5图片上传详解
2017-12-25 本文已影响0人
怀王
现在的项目中越来越多的会用到图片上传，因此，今天就和大家讨论下图片上传预览的原理，也希望能帮到大家。资历尚浅，有问题欢迎留言讨论。
本文结构上采用是什么，怎么用，末尾会给大家写上一点实例便于大家理解。
1.是什么
FileReader
在html5中，提供了FileReader来读取本地文件，使我们可以实现图片预览功能。
属性
FileReader.error
读取文件是出现的DOM错误，会返回一个 FileError 对象。根据最新的FileAPI草案，现在的FileReader.error会返回一个 DOMError 对象
FileReader.readyState
读取数据的状态，有三个值
EMPTY：没有数据被加载 （0）
LOADING：数据正在被加载 （1）
DONE：已完成全部的读取请求. （2）
FileReader.result
代表数据读取完成后的结果，只有在数据被加载完成后，result属性才有效
事件
FileReader.onbort在FileReader的reading操作被中断的时候触发。
FileReader.onerror在FileReader读取数据过程中发生错误时触发
FileReader.onload在FileReader读取事件完成后调用
FileReader.onloadstart在FileReader读取事件开始时调用
FileReader.onloadend在FileReader读事件完成后调用
FileReader.onprogress在FileReader读取数据的过程中调用
方法
FileReader.abort()中断读数据操作，直接返回，readyState将被设置为DONE
FileReader.readAsArrayBuffer()读取Blob类型的数据，读取完成后返回ArrayBuffer对象，ArrayBuffer对象存储数据内容。
FileReader.readAsBinaryString()读取一个Blob对象，将Blob对象中的原始二进制数据作为字符串的形式返回。
FileReader.readAsDataURL()返回一个代表文件数据的URL
FileReader.readAsTextString()读取一个Blob对象，返回一个文本字符串。
OK，下面附上一个demo。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传实例</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="form-group">
<label for="input">File input</label>
<input type="file" class="form-control" id="input">
</div>
<div class="pic-box">
<img src="">
</div>
</div>
</body>
</html>
上面为HTML代码
function upload(_this){
var file = _this.files[0];
var input = $("#input");
if(!/image\/\w+/.test(file.type)){
alert("文件必须为图片！"); //判断上传图片类型
return false;
}
if(!FileReader){
alert("你的浏览器不支持H5的FileReader");
input.setAttribute("disabled","disabled");//浏览器不支持禁用input type='file'文件上传标签
return false;
}
//上传图片预览
var fileReader = new FileReader(); //创建fileReader实例对象
fileReader.readAsDataURL(file) //读取上传对象
fileReader.onload = function(e){ //读取成功时进行逻辑代码
var imgSrc = this.result; //result 为上传成功的图片base64码
$('.pic-box img').attr('src',imgSrc);
}
}
上为逻辑代码，希望能帮到大家，有什么不足的地方欢迎留言讨论，预祝大家早日成神。
