怎么在php中利用ajax對圖片進行異步上傳

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

具體內容如下

//html代碼

<form enctype="multipart/form-data" id="upForm">
 <input type="file" name="file" ><br><br>
 <input type="button" value="提交">
</form>
<div class="picDis">
 <img src="" alt="">
</div>

//js代碼

(':button').click(function(event) {
　　//formdata儲存異步上傳數據
 var formData = new FormData($('form')[0]);
 formData.append('file',$(':file')[0].files[0]);
 //坑點: 無論怎么傳數據,console.log(formData)都會顯示為空,但其實值是存在的,f12查看Net tab可以看到數據被上傳了
 $.ajax({
  url:'formtest.php',
  type: 'POST',
  data: formData,
  //這兩個設置項必填
  contentType: false,
  processData: false,
  success:function(data){
  console.log(data)
  var srcPath = data;
  console.log();
　　　　 //注意這里的路徑要根據自己的儲存文件的路徑設置
  $('.picDis img').attr('src', '..'+srcPath);
  }
 })
 });

php:

<?php 

$upFile = $_FILES['file'];

/**
* 創建文件夾函數,用于創建保存文件的文件夾
* @param str $dirPath 文件夾名稱
* @return str $dirPath 文件夾名稱
*/
function creaDir($dirPath){
 $curPath = dirname(__FILE__);
 $path = $curPath.'\\'.$dirPath;
 if (is_dir($path) || mkdir($path,0777,true)) {
  return $dirPath;
 }
}

//判斷文件是否為空或者出錯
if ($upFile['error']==0 && !empty($upFile)) {
 $dirpath = creaDir('upload');
 $filename = $_FILES['file']['name'];
 $queryPath = './'.$dirpath.'/'.$filename;
 //move_uploaded_file將瀏覽器緩存file轉移到服務器文件夾
 if(move_uploaded_file($_FILES['file']['tmp_name'],$queryPath)){
  echo $queryPath;
 }
}

 ?>

點擊上傳圖片并發送后, 可以看到頁面上顯示出圖片, 查看本地文件夾可以看到文件也已儲存到服務器.

在客戶端實現異步上傳的關鍵在于FormData,關于這部分這里有詳細介紹: FormData()

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