對一個網(wǎng)站而言，有一個基本的不可缺少的功能，那就是文件上傳。使用PHP預(yù)壓來實現(xiàn)文件上傳可謂是有得天獨厚的優(yōu)勢的，那么今天，就一起來做一個關(guān)于無刷新實現(xiàn)的文件上傳吧。
--------------------------------------------------------------------------------
普通表單
前端頁面
<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>
后臺處理
print_r($_POST);$username = $_POSY['username'];$password = $_POST['password'];$email = $_POST['email'];// 在服務(wù)器上和數(shù)據(jù)庫內(nèi)容信息對比即可，實現(xiàn)相關(guān)的業(yè)務(wù)邏輯。
···
帶有文件的表單
帶有文件的表單和普通表單是有很大的區(qū)別的，首先我們要在表單上聲明一個屬性，如下：
<form enctype='multipart/form-data'>
來告訴服務(wù)器，我們上傳的表單包含有文件信息。
刷新方式
談到刷新模式，也就是點擊完submit之后，頁面跳轉(zhuǎn)到業(yè)務(wù)處理界面。這也是我們普通方式實現(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" />
后臺頁面
后臺處理除了普通的表單數(shù)據(jù)之外，最重要的是處理文件信息。PHP內(nèi)置了一個函數(shù)，可以方便的把上傳過來的文件從臨時的數(shù)據(jù)區(qū)轉(zhuǎn)移到我們的目標(biāo)文件夾，實現(xiàn)上傳的業(yè)務(wù)邏輯。
move_uploaded_file('臨時文件路徑','目標(biāo)文件路徑');
無刷新方式
使用無刷新方式，與使用刷新方式的唯一的區(qū)別就是阻止了頁面的跳轉(zhuǎn)，我們通常會有兩種方式來實現(xiàn)。
•在表單提交事件的末尾加上return false。
<script>var form = document.getElementsByTagName('form')[0];form.onsubmit = function(){ // to do something ··· // 阻止頁面跳轉(zhuǎn) return false;}</script>•使用h5相關(guān)方式。
<script>var form = document.getElementsByTagName('form')[0];form.onsubmit = function(event){ // to do something ··· // 阻止頁面跳轉(zhuǎn) event.preventDefault();}</script>其他的操作處理與帶跳轉(zhuǎn)的保持一致即可。
大文件上傳
雖然PHP實現(xiàn)其文件上傳很方便，也很快速。但是上傳文件的大小并不是無限制的。默認(rèn)來說，有兩個因素會限制我們上傳文件的大小。
•post的極值
•upload的極值
我們可以通過手動的更改php.ini配置信息來實現(xiàn)上傳文件大小的控制。
POST極值
post_max_size = 200M
upload極值
upload_max_filesize=200M
上傳細(xì)節(jié)
ajax對象有一個叫upload的屬性，而且upload也作為一個對象而存在。其擁有一個叫onprogress的方法，我們可以通過監(jiān)測這個方法，來查看文件上傳過程中的百分比。
前端頁面
<!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>無刷新方式上傳附件</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è)置進度條--><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>后臺處理
<?php//print_r($_POST);//echo "---------------------"."<BR>";//print_r($_FILES);// 附件的存儲位置、附件的名字，記得一定要存在upload文件夾$path = "../upload/";// 獲取文件的原始名稱$origin_name = $_FILES['photo']['name'];// 拼接成該文件在服務(wù)器上的名稱$server_name = $path.$origin_name;if($_FILES['photo']['error']>0) { die("出錯了！".$_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文件夾的存在性以及路徑問題。
總結(jié)
文件上傳是一個很基礎(chǔ)的功能，實現(xiàn)起來也不是很復(fù)雜。但是這個功能卻又是那么的重要，我們可以方便的通過文件上傳來配合修改用戶的諸如頭像，以及其他文件信息。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答
圖片精選
