abstract：這篇文章為大家詳細(xì)主要介紹了PHP Ajax實(shí)現(xiàn)無(wú)刷新附件上傳功能的具體代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下.對(duì)一個(gè)網(wǎng)站而言，有一個(gè)基本的不可缺少的功能，那就是文件上傳。使用PHP預(yù)壓來(lái)實(shí)現(xiàn)文件上傳可謂是有得天獨(dú)厚的優(yōu)勢(shì)的，那么今天，就一起來(lái)做一個(gè)關(guān)于無(wú)刷新實(shí)現(xiàn)的文件上傳吧。-----------------------------------------------------
這篇文章為大家詳細(xì)主要介紹了PHP Ajax實(shí)現(xiàn)無(wú)刷新附件上傳功能的具體代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下.
對(duì)一個(gè)網(wǎng)站而言，有一個(gè)基本的不可缺少的功能，那就是文件上傳。使用PHP預(yù)壓來(lái)實(shí)現(xiàn)文件上傳可謂是有得天獨(dú)厚的優(yōu)勢(shì)的，那么今天，就一起來(lái)做一個(gè)關(guān)于無(wú)刷新實(shí)現(xiàn)的文件上傳吧。
--------------------------------------------------------------------------------
普通表單
前端頁(yè)面
<form action="./fileupload.php" method="POST"> <p>Username<input type="text" name="username" /></p> <p>Password<input type="password" name="password" /></p> <p>E-mail<input type="text" name="email" /></p> <input type="submit" value="Register" /> </form>
后臺(tái)處理
print_r($_POST); $username = $_POSY['username']; $password = $_POST['password']; $email = $_POST['email']; // 在服務(wù)器上和數(shù)據(jù)庫(kù)內(nèi)容信息對(duì)比即可，實(shí)現(xiàn)相關(guān)的業(yè)務(wù)邏輯。 ···
帶有文件的表單
帶有文件的表單和普通表單是有很大的區(qū)別的，首先我們要在表單上聲明一個(gè)屬性，如下：
<form enctype='multipart/form-data'>
來(lái)告訴服務(wù)器，我們上傳的表單包含有文件信息。
刷新方式
談到刷新模式，也就是點(diǎn)擊完submit之后，頁(yè)面跳轉(zhuǎn)到業(yè)務(wù)處理界面。這也是我們普通方式實(shí)現(xiàn)的表單的數(shù)據(jù)提交。
前端界面
<form action="./fileupload.php" enctype="multipart/form-data" method="post"> <p>Username<input type="text" name="username" /></p> <p>Password<input type="password" name="password" /></p> <p>E-mail<input type="text" name="email" /></p> <p>Photo<input type="file" name="photo" /></p> <input type="submit" value="Register" />
后臺(tái)頁(yè)面
后臺(tái)處理除了普通的表單數(shù)據(jù)之外，最重要的是處理文件信息。PHP內(nèi)置了一個(gè)函數(shù)，可以方便的把上傳過(guò)來(lái)的文件從臨時(shí)的數(shù)據(jù)區(qū)轉(zhuǎn)移到我們的目標(biāo)文件夾，實(shí)現(xiàn)上傳的業(yè)務(wù)邏輯。
move_uploaded_file('臨時(shí)文件路徑','目標(biāo)文件路徑');
無(wú)刷新方式
使用無(wú)刷新方式，與使用刷新方式的唯一的區(qū)別就是阻止了頁(yè)面的跳轉(zhuǎn)，我們通常會(huì)有兩種方式來(lái)實(shí)現(xiàn)。
?在表單提交事件的末尾加上return false。
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(){
// to do something
···
// 阻止頁(yè)面跳轉(zhuǎn)
return false;
}
</script> ?使用h5相關(guān)方式。
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(event){
// to do something
···
// 阻止頁(yè)面跳轉(zhuǎn)
event.preventDefault();
}
</script>
其他的操作處理與帶跳轉(zhuǎn)的保持一致即可。
大文件上傳
雖然PHP實(shí)現(xiàn)其文件上傳很方便，也很快速。但是上傳文件的大小并不是無(wú)限制的。默認(rèn)來(lái)說(shuō)，有兩個(gè)因素會(huì)限制我們上傳文件的大小。
?post的極值
?upload的極值
我們可以通過(guò)手動(dòng)的更改php.ini配置信息來(lái)實(shí)現(xiàn)上傳文件大小的控制。
POST極值
post_max_size = 200M
upload極值
upload_max_filesize=200M
上傳細(xì)節(jié)
ajax對(duì)象有一個(gè)叫upload的屬性，而且upload也作為一個(gè)對(duì)象而存在。其擁有一個(gè)叫onprogress的方法，我們可以通過(guò)監(jiān)測(cè)這個(gè)方法，來(lái)查看文件上傳過(guò)程中的百分比。
前端頁(yè)面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件上傳示例</title>
<script>
window.onload = function(){
var form = document.getElementsByTagName("form")[0];
form.onsubmit = function(evt){
// 收集表單信息
var fd = new FormData(form);
var ajax = new XMLHttpRequest();
// 給Ajax設(shè)置文件上傳的感知事件
ajax.upload.onprogress = function(evt){
var loaded = evt.loaded;
var total = evt.total;
document.getElementById("progress").value =(loaded/total)*100;
}
ajax.onreadystatechange = function() {
if(ajax.readyState==4){
alert(ajax.responseText);
}
}
ajax.open('post','./fileupload.php');
ajax.send(fd);
// 阻止瀏覽器的跳轉(zhuǎn)
evt.preventDefault();
//return false;
}
}
</script>
</head>
<body>
<h2>無(wú)刷新方式上傳附件</h2>
<form action="./fileupload.php">
<p>Username<input type="text" name="username" /></p>
<p>Password<input type="password" name="password" /></p>
<p>E-mail<input type="text" name="email" /></p>
<p>Photo<input type="file" name="photo" /></p>
<!--設(shè)置進(jìn)度條-->
<style>
#parent {width:300px;height:34px;border:1px solid #033;}
#son {width:100%;height:10%;background-color:green}
progress {width:100%;height:34px;}
</style>
<div id="parent">
<div id="son">
<progress id="progress">
</div>
</div>
<input type="submit" value="Register" />
</form>
</body>
</html>后臺(tái)處理
<?php
//print_r($_POST);
//echo "---------------------"."<BR>";
//print_r($_FILES);
// 附件的存儲(chǔ)位置、附件的名字，記得一定要存在upload文件夾
$path = "../upload/";
// 獲取文件的原始名稱
$origin_name = $_FILES['photo']['name'];
// 拼接成該文件在服務(wù)器上的名稱
$server_name = $path.$origin_name;
if($_FILES['photo']['error']>0) {
die("出錯(cuò)了！".$_FILES['photo']['error']);
}
if(move_uploaded_file($_FILES['photo']['tmp_name'],$server_name)){
echo "<BR>"."Upload Success!";
}else{
echo "<BR>"."Upload Failed!".$_FILES['photo']['error'];
}
?>
記得保證upload文件夾的存在性以及路徑問(wèn)題。
總結(jié)
文件上傳是一個(gè)很基礎(chǔ)的功能，實(shí)現(xiàn)起來(lái)也不是很復(fù)雜。但是這個(gè)功能卻又是那么的重要，我們可以方便的通過(guò)文件上傳來(lái)配合修改用戶的諸如頭像，以及其他文件信息。
更多關(guān)于PHP Ajax實(shí)現(xiàn)無(wú)刷新附件上傳請(qǐng)關(guān)注PHP中文網(wǎng)（m.miracleart.cn）其它文章！