先給大家展示下效果圖，大家感覺不錯，請參考實現代碼。

最近在使用ThinkPHP5開發項目中客戶有一個需求是在圖片上傳時附帶預覽功能。雖然現在有很多的插件能實現，但是還是覺得自己寫比較好。我們知道，圖片上傳需要一個input:file表單

<input type='file' name='pic'> 

當我們點擊表單的時候提示選擇需要上傳的圖片。但是此需求我們分析一下，可以在點擊圖片的時候使用JS實現預覽功能，并且樓主也是這樣做的。代碼如下：

function getFileUrl(sourceId) {    var url;   url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));    return url;  }  function preImg(sourceId, targetId) {    var url = getFileUrl(sourceId);    var imgPre = document.getElementById(targetId);    imgPre.src = url;  } 

效果如下:

但是這樣的話會涉及很多兼容問題。所以就想到了Ajax，在圖片上傳時，使用Ajax技術。將圖片上傳到服務器，再由服務器返回給我們圖片的上傳地址，然后添加到img標簽中去。過程雖然麻煩了點，但是親測不會有兼容問題。

需要發送Ajax請求的話，當然input:file表單是不能實現我們的需求的，因此，我們需要給表單關聯一個單擊事件去幫我們進行Ajax請求并選擇圖片

<form id="form1">    <label for="exampleInputEmail1">頭像</label>    <input type="button" value="上傳圖片" onclick="f.click()" class="btn_mouseout"/><br>     <p><input type="file" id="f" name="f" onchange="sc(this);" style="display:none"/></p>  </form> <div id="result"></div> 

當我們點擊上傳圖片這個button按鈕時觸發input:file選擇圖片實現Ajax上傳

<script> function sc(){   var animateimg = $("#f").val(); //獲取上傳的圖片名 帶//   var imgarr=animateimg.split('//'); //分割   var myimg=imgarr[imgarr.length-1]; //去掉 // 獲取圖片名   var houzui = myimg.lastIndexOf('.'); //獲取 . 出現的位置   var ext = myimg.substring(houzui, myimg.length).toUpperCase(); //切割 . 獲取文件后綴   var file = $('#f').get(0).files[0]; //獲取上傳的文件   var fileSize = file.size;      //獲取上傳的文件大小   var maxSize = 1048576;       //最大1MB   if(ext !='.PNG' && ext !='.GIF' && ext !='.JPG' && ext !='.JPEG' && ext !='.BMP'){     parent.layer.msg('文件類型錯誤,請上傳圖片類型');     return false;   }else if(parseInt(fileSize) >= parseInt(maxSize)){     parent.layer.msg('上傳的文件不能超過1MB');     return false;   }else{      var data = new FormData($('#form1')[0]);      $.ajax({        url: "{:url('User/uppic')}",        type: 'POST',        data: data,        dataType: 'JSON',        cache: false,        processData: false,        contentType: false      }).done(function(ret){        if(ret['isSuccess']){         var result = '';         var result1 = '';         // $("#show").attr('value',+ ret['f'] +);         result += '<img src="' + '__ROAD__' + ret['f'] + '" width="100">';         result1 += '<input value="' + ret['f'] + '" name="user_headimg" style="display:none;">';         $('#result').html(result);         $('#show').html(result1);         layer.msg('上傳成功');       }else{          layer.msg('上傳失敗');       }      });      return false;     }    } </script>