溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么在PHP中利用Ajax實現(xiàn)一個無刷新附件上傳功能

發(fā)布時間：2021-01-30 13:52:23 來源：億速云 閱讀：135 作者：Leah 欄目：開發(fā)技術(shù)

今天就跟大家聊聊有關(guān)怎么在PHP中利用Ajax實現(xiàn)一個無刷新附件上傳功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

前端頁面

<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)移到我們的目標文件夾，實現(xiàn)上傳的業(yè)務(wù)邏輯。

move_uploaded_file('臨時文件路徑','目標文件路徑');

無刷新方式

使用無刷新方式，與使用刷新方式的唯一的區(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>

 ?使用h6相關(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)其文件上傳很方便，也很快速。但是上傳文件的大小并不是無限制的。默認來說，有兩個因素會限制我們上傳文件的大小。
 ?post的極值
 ?upload的極值
我們可以通過手動的更改php.ini配置信息來實現(xiàn)上傳文件大小的控制。 

POST極值

post_max_size = 200M

upload極值

upload_max_filesize=200M

上傳細節(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>
<h3>無刷新方式上傳附件</h3>
<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'];  
}
?>

看完上述內(nèi)容，你們對怎么在PHP中利用Ajax實現(xiàn)一個無刷新附件上傳功能有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手