原理：當(dāng)點(diǎn)擊上傳時(shí),則調(diào)用JS的函數(shù)用ajax像后臺(tái)發(fā)送數(shù)據(jù)驹针。后臺(tái)接收數(shù)據(jù)后使用$_FILES獲取逞刷。獲取到后新建一個(gè)文件夾纠俭，將新建的文件夾名字拼接上傳文件的冰木，使用move_uploaded_file函數(shù)將上傳的文件放入到服務(wù)器新建的文件夾中
Code：
1穷劈、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>
2、JS發(fā)送Ajax方法
$(':button').click(function(event) {
//formdata儲(chǔ)存異步上傳數(shù)據(jù)
var formData = new FormData($('form')[0]);
formData.append('file',$(':file')[0].files[0]);
//坑點(diǎn): 無論怎么傳數(shù)據(jù),console.log(formData)都會(huì)顯示為空,但其實(shí)值是存在的,f12查看Net tab可以看到數(shù)據(jù)被上傳了
//所以要這樣打印console.log($(':file')[0].files[0]);
$.ajax({
url:'uplode.php',
type: 'POST',
data: formData,
//這兩個(gè)設(shè)置項(xiàng)必填
contentType: false,
processData: false,
success:function(data){
console.log(data)
var srcPath = data;
console.log();
//注意這里的路徑要根據(jù)自己的儲(chǔ)存文件的路徑設(shè)置
$('.picDis img').attr('src',srcPath);
}
})
});
3踊沸、php接收數(shù)據(jù)處理
$upFile = $_FILES['file'];
/**
* 創(chuàng)建文件夾函數(shù),用于創(chuàng)建保存文件的文件夾
* @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;
}
}
//判斷文件是否為空或者出錯(cuò)
if ($upFile['error']==0 && !empty($upFile)) {
$dirpath = creaDir('upload');
$filename = $_FILES['file']['name'];
$queryPath = './'.$dirpath.'/'.$filename;
//move_uploaded_file將瀏覽器緩存file轉(zhuǎn)移到服務(wù)器文件夾
if(move_uploaded_file($_FILES['file']['tmp_name'],$queryPath)){
echo $queryPath;
}
}
