H5 图片预览的两种实现
2017-07-12 本文已影响71人
风之化身呀
1、原理浅析
- FileReader，利用FileReader实例的readAsDataURL方法可以将input上传的图片转成base64形式的url，将其给到img的src属性即可
-
window.URL.createObjectURL，该API可将input上传的图片转成blob形式的url，将其给到img的src熟悉即可
看下二者的兼容性：
FileReader兼容性.png
URL兼容性.png
可以看到FileReader的兼容性是优于URL的
2、具体实现
Talk is easy，show you the Code!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片预览两种实现</title>
</head>
<body>
<input type="file" id="file" multiple>
<div class="show-img"></div>
<script>
document.getElementById('file').onchange = function(e){
var ele = document.getElementById('file').files[0];
//方式1：FileReader
var fr = new FileReader();
fr.onload = function(ele){
var img = new Image();
img.src = ele.target.result;
document.querySelector('.show-img').appendChild(img);
// 得到的img是这样的<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..."/>
}
fr.readAsDataURL(ele);
//方式2：URL.createObjectURL(blob)
// var createObjectURL = function(blob){
// return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
// };
// var imgdata = createObjectURL(ele);
// var img = new Image();
// img.src = imgdata;
// // 得到的img是这样的<img src="blob:null/21183794-c843-403d-a3b5-e1a35f30587c">
// document.querySelector('.show-image').appendChild(img);
}
</script>
</body>
</html>
3、需要注意的地方
- 对于FileReader，可能某些android机型不能上传图片（oppo 安卓4.3？未实践，看别人博客说有这个问题），解决方案：http://www.tuicool.com/articles/buu6ji
- 据说creatObjectURL可以有更好的性能，处理速度更快，待实践
