這篇文章主要為大家詳細介紹了php+ajax實現異步上傳文件或圖片功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文為大家分享了ajax異步上傳文件或圖片功能的具體代碼，供大家參考，具體內容如下

//html代碼

//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:

$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上传图文,php+ajax实现异步上传图文功能详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。