簡述

　　　　本文的使用場景主要是用戶修改頭像，選擇本地圖片後在頁面上面顯示選擇的圖片。使用jQuery+js實現。

1.首先，頁面上有一個input[type=‘file‘]標簽

<input id="head" name="headPortrait" class="btn btn-xm btn-outline btn-primary" style="margin: 0 auto" type="file" value="選擇圖片" accept="image/png,image/jpeg">

　　accept可以在前臺限制用戶可以上傳什麽類型的文件。

2.在標簽下面添加一個div，用來顯示用戶選擇的圖片

<div id="headImg" style="margin-top: 10px;"></div>

3.給input綁定change事件，獲取並加載圖片

 1 $("#head").change(function () {
 2     var eImg = $("<img width=‘120px‘ name=‘pic‘ />");
 3     eImg.attr(‘src‘, getObjectURL(this.files[0]));
 4     $("#headImg").html(eImg); 6 })
 7 
 8 //獲取URL
 9
 
 function getObjectURL(file) {
10     var url = null;
11     if (window.createObjectURL != undefined) { // basic
12         url = window.createObjectURL(file);
13     } else if (window.URL != undefined) { // mozilla(firefox)
14         url = window.URL.createObjectURL(file);
15     } else if (window.webkitURL != undefined) { //
 
 webkit or chrome
16         url = window.webkitURL.createObjectURL(file);
17     }
18     return url;
19 }

完事

上傳圖片時預覽