PHPAjaxJavaScript實現無重新整理附件上傳

郭璞發表於2016-08-16
PHPJavaScript

對一個網站而言，有一個基本的不可缺少的功能，那就是檔案上傳。使用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>
<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`];
// 拼接成該檔案在伺服器上的名稱
$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資料夾的存在性以及路徑問題。

總結

檔案上傳是一個很基礎的功能，實現起來也不是很複雜。但是這個功能卻又是那麼的重要，我們可以方便的通過檔案上傳來配合修改使用者的諸如頭像，以及其他檔案資訊。


相關文章