代碼實現和解析
一、關於<input type="file" name="" id="file"/>
其files屬性記錄了你放入其中的文件，所以你可以此處可以通過
img=document.getElementById("file").files[0] 的方式獲取你的上傳的圖片實例，但是也需要你注意，如果使用jquery的$(“#file”)是無法獲取到你files的屬性。
二、關於FileReader()對象
FileReader()是H5支持的瀏覽器緩存文件的對象，所以你上傳(未提交到服務器)的文件全部會緩存在瀏覽器中，可以通過這個對象獲取。
1、新建一個實例 var reader=new FileReader();
2、將相關的文件傳給其reader.readAsDataURL(img);
3、當文件全部加載到瀏覽器內存後的回調函數。reader.onload=function(){ ... ...}
4、將你的文件的源傳給img.但是要注意的是你的如果先前以及創建好了img是無法改變其src的屬性的所以你必須要去動態的創建img然後再通過append(）的方式去放入到相關的div中去。
eg:$("#img1").append("<img src="+reader.result+" />");
完整的實例如下參考:
<!DOCTYPE html>
<html>
<head>
<title>HTML5上傳圖片預覽</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<input type="file" name="" id="file"/>
<div id="img1" style="width: 100px;height: 100px;"></div>
<script type="text/javascript">
$("#file").change(function(){
img=document.getElementById("file").files[0]
var reader=new FileReader();
reader.readAsDataURL(img);
reader.onload=function(e){
$("#img1").append("<img src="+reader.result+" />");
}
})
</script>
</body>
</html>