在網(wǎng)頁中實現(xiàn)圖片上傳功能，當用戶選擇了圖片文件后，想在頁面中即時預覽該圖片，這個簡單的需求在很久很久以前可以實現(xiàn)，后來因為安全性的問題被禁止直接訪問本地文件了，所以又在很長很長一段時間里，想通過HTML直接預覽用戶選擇的圖片變得不可能，自從有了HTML5，這個功能又回來了，通過FileReader可以輕松的實現(xiàn)這個功能。
只要在< input type ="file" / >文件表單元素中監(jiān)聽 onchange
事件，然后通過FileReader讀取圖片文件，然后將讀取的內(nèi)容在中顯示即可。示例代碼如下：
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
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學習交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。