首頁 >後端開發 >php教程 >PHP Ajax實作無刷新附件上傳的方法

PHP Ajax實作無刷新附件上傳的方法

墨辰丷原創: 2018-06-01 15:22:431375瀏覽

這篇文章為大家詳細主要介紹了PHP Ajax實現無刷新附件上傳功能的具體程式碼，具有一定的參考價值，有興趣的小夥伴們可以參考一下

對一個網站而言，有一個基本的不可缺少的功能，那就是文件上傳。使用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[&#39;username&#39;];
$password = $_POST[&#39;password&#39;];
$email = $_POST[&#39;email&#39;];

// 在服务器上和数据库内容信息对比即可，实现相关的业务逻辑。

···

# 帶有檔案的表單

有檔案的表單和一般表單是有很大的差別的，首先我們要在表單上宣告一個屬性，如下：

702865191b61c97523db8fc12c31cb75

#來告訴伺服器，我們上傳的表單包含有檔案資訊。

刷新方式

談到刷新模式，也就是點選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(&#39;form&#39;)[0];
form.onsubmit = function(){
  // to do something
  ···
  // 阻止页面跳转
  return false;
}

</script>

•使用h5相關方式。

<script>
var form = document.getElementsByTagName(&#39;form&#39;)[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(&#39;post&#39;,&#39;./fileupload.php&#39;);
      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[&#39;photo&#39;][&#39;name&#39;];
// 拼接成该文件在服务器上的名称
$server_name = $path.$origin_name;

if($_FILES[&#39;photo&#39;][&#39;error&#39;]>0) {
  die("出错了！".$_FILES[&#39;photo&#39;][&#39;error&#39;]); 
}
if(move_uploaded_file($_FILES[&#39;photo&#39;][&#39;tmp_name&#39;],$server_name)){
  echo "<BR>"."Upload Success!";
}else{
  echo "<BR>"."Upload Failed!".$_FILES[&#39;photo&#39;][&#39;error&#39;];  
}
?>

記得保證upload資料夾的存在性以及路徑問題。

總結

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

以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。

PHP Ajax實作無刷新附件上傳的方法

相關文章