您的位置：首页 > Web前端 > HTML5

html5的FileReader实现图片上传预览并生成base64

2016-08-18 14:02 796 查看
关于FileReader

HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

检测浏览器对FileReader的支持

if(window.FileReader) {
var reader = new FileReader();
}
else {
alert("你的浏览器不支持FileReader接口！");
}


FileReader对象的方法

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名参数描述
readAsBinaryStringfile将文件读取为二进制编码
readAsTextfile,[encoding]将文件读取为文本
readAsDataURLfile将文件读取为DataURL
abort(none)终端读取操作
FileReader接口事件

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件描述
onabort中断时触发
onerror出错时触发
onload文件读取成功完成时触发
onloadend读取完成触发，无论成功或失败
onloadstart读取开始时触发
onprogress读取中
文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

上传图片预览

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="full-screen" content="true" />
<meta name="screen-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" />
<title>图片上传预览及生成base64</title>
<style>
/*图片上传*/

.img-upload-con {
position: relative;
margin: 0 auto;
width: 80px;
height: 80px;
overflow: hidden;
border: 1px solid #CCCCCC;
}

.uploader_input_wrp {
margin: 0;
position: absolute;
left: 50%;
top: 50%;
width: 80px;
height: 80px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.uploader_input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
}

.uploader_input_wrp:before,
.uploader_input_wrp:after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #D9D9D9;
}

.uploader_input_wrp:before {
width: 1px;
height: 15px;
}

.uploader_input_wrp:after {
width: 15px;
height: 1px;
}

.img-pre-con {
width: 100%;
}

.img-pre-con img {
width: 100%;
margin-top: 10px;
}
</style>
</head>

<body>
<h4>图片上传预览及生成base64</h2>
<div class="img-pre-con">
</div>
<div class="img-upload-con">
<div class="uploader_input_wrp">
<input type="file" class="upload-photo uploader_input" id="supervise_photo" name="upload$photo" placeholder="上传图片" capture="camera" accept="image/*">
</div>
</div>
<script>
var imgNum = 0;
document.querySelector('.upload-photo').addEventListener('change', function() {
var imgData = {};
if(document.querySelector(".upload-photo").files && document.querySelector(".upload-photo").files[0]) {
var file = document.querySelector(".upload-photo").files[0];
//检验是否为图片文件
if(!/image\/\w+/.test(file.type)) {
alert("看清楚，这个需要图片！");
return false;
}
imgNum++;
var imgObj = document.createElement('img');
imgObj.classList.add('img-pre' + imgNum);
var html = '<img class="img-pre' + imgNum + '" src="" alt="" />'
document.querySelector(".img-pre-con").appendChild(imgObj);
imgData.fileName = file.name;
imgData.fileSize = file.size;
imgData.fileType = file.type;
imgData.base64 = {};
readURL(document.querySelector(".upload-photo"), document.querySelector('.img-pre' + imgNum), imgData);
console.log('imgData', imgData);
//其他操作...
}
});

function readURL(input, tmpimg, imgData) {
if(input.files && input.files[0]) {
var reader = new FileReader();
//注册onload事件
reader.onload = function(e) {
if(!/image/.test(e.target.result)) {
alert('请上传图片格式...');
return false;
}
tmpimg.setAttribute('src', e.target.result);
//console.log(e.target.result);
imgData.base64 = e.target.result;
}
//读取文件成为二进制流
reader.readAsDataURL(input.files[0]);
}
};
</script>
</body>
</html>


Demo地址

图片上传预览及生成base64
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 FileReader 图片上传 base64
相关文章推荐
新的分享
章节导航