圖片預覽功能是在網站開發中非常常見的，以前圖片預覽是一個很簡單的功能，只需要JS獲得一下上傳的路徑，然後將路徑設置為某一個img標簽的src就可以了，但是現在很多浏覽器出現安全方面的考慮，都不允許直接獲得文件的路徑，通過file的value值獲得的路徑都是帶有fakepath，所以獲得路徑就變得困難，但是H5之後，可以通過JS的fileReader來實現文件的預覽：代碼如下：
JS處理代碼：
<script type="text/javascript">
document.getElementById('file1').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('img1').src = e.target.result;
};
})(f);
reader.readAsDataURL(f);
}
}
</script>
HTML標簽很簡單：需要一個file標簽和一個img標簽
<img id="img1" width="120" height="130" style="padding-top:10px"/>
<input type="file" name="file" id="file1"/>
這樣就實現了文件的預覽功能。