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可以有更好的性能，處理速度更快，待實踐
