怎么在thinkPHP中使用ajax異步上傳圖片

這期內容當中小編將會給大家帶來有關怎么在thinkPHP中使用ajax異步上傳圖片，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

利用原始的文件上傳處理，雖然通過原始js語句能實時顯示上傳圖片，但是這樣的話會涉及很多兼容問題。使用ajax技術，實現選擇性刪除所選圖片功能，并不會有兼容問題。

表單文件form：

<form method="post" enctype="multipart/form-data">
<div >
  主題圖片:
  <span id="img-list-box" ></span>
  <span >
    <a >圖片上傳</a>
    <input type="file" name="img_src"  id="up-img-file" onchange="upimg(this)">
   </span>
</div>
</form>

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

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

JavaScript代碼：

<script type="text/javascript" src="__STATIC__/home/js/jquery.min.js"></script>
<script type="text/javascript">
  function upimg(obj)
  {
    if( obj.value == "" ) {
      return;
    }
    var formdata = new FormData();
    //<input type="file" name="img" value="" />
    formdata.append("img" , $(obj)[0].files[0]);//獲取文件法二
    $.ajax({
      type : 'post',
      url : '/home/note/upimg', //接口
      data : formdata,
      cache : false,
      processData : false, // 不處理發送的數據，因為data值是Formdata對象，不需要對數據做處理
      contentType : false, // 不設置Content-type請求頭
      success : function(response){
        console.log(response);
        var html = '<div >'
            +'<span >'
            +'<img src="'+response+'"  />'
            +'</span>'
            +'<input type="hidden" name="imgs[]" value="'+response+'" />'
            +'<a onclick="delImg(this);" >X</a>'
            +'</div>';

        $('#img-list-box').append(html);
      },
      error : function(){ }
    });
  }

  function delImg(obj)
  {
    $(obj).parent('div').remove();
  }
</script>

點擊選擇圖片之后就是交給服務器端處理了。

php接口文件：

  public function upimg()
  {
    //驗證
    $file = request()->file('img');
    // 移動到框架應用根目錄/public/uploads/ 目錄下
    if($file){
      $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
      if($info){
        // 成功上傳后 獲取上傳信息
        $img_src = '/uploads/'.$info->getSaveName();
        echo $img_src; //返回ajax請求
      }else{
        // 上傳失敗獲取錯誤信息
        $this->error($file->getError());
      }
    }
  }

上述就是小編為大家分享的怎么在thinkPHP中使用ajax異步上傳圖片了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。