Ajax如何?圖片上傳並預覽功能

本篇文章給大家分享的內容是Ajax如何?圖片上傳並預覽功能，有著一定的參考價值，有需要的朋友可以參考一下

最近在使用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><p id="result"></p>

當我們點擊上傳圖片這個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>

這裡我們採用FormData對面進行表單提交，然後伺服器端接收

public function uppic(){        $file = request()->file('f');        $info = $file->move(ROOT_PATH . 'public/uploads/avatar');        $a=$info->getSaveName();          $imgp= str_replace("\\","/",$a);          $imgpath='uploads/avatar/'.$imgp;          $banner_img= $imgpath;        $response = array();          if($info){              $response['isSuccess'] = true;              $response['f'] = $imgpath;          }else{              $response['isSuccess'] = false;          }                        echo json_encode($response);}

這裡會返回圖片上傳的url路徑：$response['f] = $imgpath;現在我們要做的就是將這個url寫進前台HTML部分進行一個顯示

<p class="form-group">    <!-- 將Ajax上傳的圖片路徑添加到資料庫 -->   <p id="show"></p></p>

在JS中添加

$('#show').html(result1);

即可進行上傳並預覽啦。最終如下