溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關怎么在PHP中實現Ajax文件上傳功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
項目結構圖：
12-progress-upload.html文件：
頁面中主要有一個上傳文件控件，有文件被選擇時響應selfile()方法，接著利用js讀取上傳文件、創建FormData對象和xhr對象，利用xhr2的新標準，寫一個監聽上傳過程函數，請求11-fileApi.php文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML5帶進度條的上傳功能</title>
<link rel="stylesheet" href="">
<script>
function selfile(){
//js讀取上傳文件
var file = document.getElementsByTagName('input')[0].files[0];
//創建FormData對象
var fd = new FormData();
fd.append('pic',file);
//ajax上傳文件
var xhr = new XMLHttpRequest();
xhr.open('POST','11-fileApi.php',true);
//利用xhr2的新標準，為上傳過程，寫一個監聽函數
xhr.upload.onprogress = function(ev){
if(ev.lengthComputable){//文件長度可計算
var percent = 100*ev.loaded/ev.total;//計算上傳的百分比
document.getElementById('bar').style.width = percent + '%';//更改上傳進度
document.getElementById('bar').innerHTML = parseInt(percent)+'%';//顯示上傳進度
}
}
xhr.send(fd);//發送請求
}
</script>
<style>
#progress{
width:500px;
height:30px;
border:1px solid green;
}
#bar{
width:0%;
height:100%;
background-color: green;
}
</style>
</head>
<body>
<h2>HTML5帶進度條的上傳功能</h2>
<div id="progress">
<div id="bar"></div>
</div>
<input type="file" name="pic" onchange="selfile();" />
</body>
</html>11-fileApi.php文件：
首先判斷是否有文件上傳，然后判斷文件上傳是否成功，最后移動文件至當前目錄下的upload目錄下，文件名不變。
<?php
/**
* fileApi實現Ajax上傳文件
* @author webbc
*/
if(empty($_FILES)){
exit('no file');
}
if($_FILES['pic']['error'] !== 0){
exit('fail');
}
move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/'.$_FILES['pic']['name']);
?>看完上述內容，你們對怎么在PHP中實現Ajax文件上傳功能有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
