在網頁中實現圖片上傳功能，當用戶選擇了圖片文件后，想在頁面中即時預覽該圖片，這個簡單的需求在很久很久以前可以實現，后來因為安全性的問題被禁止直接訪問本地文件了，所以又在很長很長一段時間里，想通過HTML直接預覽用戶選擇的圖片變得不可能，自從有了HTML5，這個功能又回來了，通過FileReader可以輕松的實現這個功能。
只要在< input type ="file" / >文件表單元素中監聽 onchange
事件，然后通過FileReader讀取圖片文件，然后將讀取的內容在中顯示即可。示例代碼如下：
document.getElementById('file').onchange = function(evt) {
// 如果瀏覽器不支持FileReader，則不處理
if (window.FileReader) return;
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// img 元素
document.getElementById('previewImage').src = e.target.result;
};
})(f);
reader.readAsDataURL(f);
}
}
// 如果瀏覽器不支持FileReader，則不處理
if (window.FileReader) return;
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// img 元素
document.getElementById('previewImage').src = e.target.result;
};
})(f);
reader.readAsDataURL(f);
}
}
via：http://blog.csdn.net/varkychan/article/details/8223979
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。