對一個網站而言，有一個基本的不可缺少的功能，那就是檔案上傳。使用PHP預壓來實現檔案上傳可謂是有得天獨厚的優勢的，那麼今天，就一起來做一個關於無重新整理實現的檔案上傳吧。
--------------------------------------------------------------------------------
普通表單
前端頁面
<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'];// 在伺服器上和資料庫內容資訊對比即可，實現相關的商務邏輯。
···
帶有檔案的表單
帶有檔案的表單和普通表單是有很大的區別的，首先我們要在表單上聲明一個屬性，如下：
<form enctype='multipart/form-data'>
來告訴伺服器，我們上傳的表單包含有檔案資訊。
重新整理方式
談到重新整理模式，也就是點擊完submit之後，頁面跳轉到業務處理介面。這也是我們普通方式實現的表單的資料提交。
前端介面
<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" />
後台頁面
幕後處理除了普通的表單資料之外，最重要的是處理檔案資訊。PHP內建了一個函數，可以方便的把上傳過來的檔案從臨時的資料區轉移到我們的目標檔案夾，實現上傳的商務邏輯。
move_uploaded_file('臨時檔案路徑','目標檔案路徑');
無重新整理方式
使用無重新整理方式，與使用重新整理方式的唯一的區別就是阻止了頁面的跳轉，我們通常會有兩種方式來實現。
•在表單提交事件的末尾加上return false。
<script>var form = document.getElementsByTagName('form')[0];form.onsubmit = function(){ // to do something ··· // 阻止頁面跳轉 return false;}</script>
•使用h5相關方式。
<script>var form = document.getElementsByTagName('form')[0];form.onsubmit = function(event){ // to do something ··· // 阻止頁面跳轉 event.preventDefault();}</script>
其他的操作處理與帶跳轉的保持一致即可。
大檔案上傳
雖然PHP實現其檔案上傳很方便，也很快速。但是上傳檔案的大小並不是無限制的。預設來說，有兩個因素會限制我們上傳檔案的大小。
•post的極值
•upload的極值
我們可以通過手動的更改php.ini配置資訊來實現上傳檔案大小的控制。
POST極值
post_max_size = 200M
upload極值
upload_max_filesize=200M
上傳細節
ajax對象有一個叫upload的屬性，而且upload也作為一個對象而存在。其擁有一個叫onprogress的方法，我們可以通過監測這個方法，來查看檔案上傳過程中的百分比。
前端頁面
<!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設定檔案上傳的感知事件 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); // 阻止瀏覽器的跳轉 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><!--設定進度條--><style> #parent {width:300px;height:34px;border:1px solid #033;} #son {width:100%;height:10%;background-color:green} progress {width:100%;height:34px;}</style><p id="parent"> <p id="son"> <progress id="progress"> </p></p><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'];// 拼接成該檔案在伺服器上的名稱$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檔案夾的存在性以及路徑問題。
總結
檔案上傳是一個很基礎的功能，實現起來也不是很複雜。但是這個功能卻又是那麼的重要，我們可以方便的通過檔案上傳來配合修改使用者的諸如頭像，以及其他檔案資訊。
以上就是本篇文的全部內容，希望能對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
