結果視圖：
步驟：
1.先創建一個img標簽，給它設定寬高以及邊框樣式
2.當用戶雙擊img標簽時，彈出檔案選擇框
（1）給img標簽設定一個雙擊事件：
（2）創建一個檔案選擇控制元件(input標簽)，設定檔案輸入框改變事件，將它隱藏：
注：accept：規定服務器接收到的檔案的型別。（檔案是通過檔案上傳提交的）
(3)當雙擊img標簽時 觸發 檔案輸入框的點擊事件：
3.檔案輸入框改變事件，改變時讀取圖片
(1)獲取檔案輸入框里面的檔案
創建一個file變數通過input標簽的ID值獲取：var file = $("#userPictureFile").get(0).files[0];
(2)判斷讀取的檔案是否是需要的檔案型別
圖片檔案 正則運算式過濾：
regexImageFilter = /^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i;
(3)進行判斷file是否是圖片檔案：
}else{ alert("選擇的不是一個有效的圖片檔案"); }
(4)使用檔案讀取器讀取檔案
檔案讀取器： var imageReader = new FileReader();
(5)把檔案轉為URL(Base64編碼)
imageReader.readAsDataURL(file);
4.將用戶選擇的圖片檔案顯示在img標簽上
(1)使用檔案讀取onload事件，在讀取檔案完成后觸發
imageReader.onload = function (evt) {
}
(2)通過img標簽設定的ID選擇器找到對應的img標簽，將圖片顯示在img標簽上
$("#userPicture").attr("src", evt.target.result);
結論：這樣就可以將圖片檔案顯示到img標簽上，但它只是簡單的顯示在頁面上而已，并沒有實質性的保存。退出頁面，資料還是會清空。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/17068.html
標籤：JavaScript
下一篇：圖片上傳保存（2）