How to upload attachments without refreshing using PHP Ajax-PHP Tutorial-php.cn

How to upload attachments without refreshing using PHP Ajax

墨辰丷

Release： 2023-03-29 08:48:01

Original

1369 people have browsed it

This article mainly introduces the specific code of PHP Ajax to implement the function of uploading attachments without refreshing. It has certain reference value. Interested friends can refer to it.

For a website , there is a basic and indispensable function, which is file upload. Using PHP precompression to achieve file upload has unique advantages, so today, let’s do a file upload without refreshing.

-------------------------------------------------- ------------------------------------

Normal form

Front-end page

<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>

Copy after login

Backend processing

print_r($_POST);
$username = $_POSY[&#39;username&#39;];
$password = $_POST[&#39;password&#39;];
$email = $_POST[&#39;email&#39;];

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

Copy after login

···

Form with file

Form with file and normal form There is a big difference. First we have to declare an attribute on the form, as follows:

To tell the server that the form we uploaded contains file information.

Refresh method

Speaking of refresh mode, that is, after clicking submit, the page jumps to the business processing interface. This is also the data submission of the form that we implement in a normal way.

Front-end interface

<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" />

Copy after login

Backend page

In addition to ordinary form data, the most important thing in background processing is to process file information. PHP has a built-in function that can easily transfer uploaded files from the temporary data area to our target folder to implement the upload business logic.

move_uploaded_file('temporary file path','target file path');

No refresh method

Using no refresh method is different from using refresh The only difference in the method is to prevent the page from jumping. We usually have two ways to achieve this.
•Add return false at the end of the form submission event.

<script>
var form = document.getElementsByTagName(&#39;form&#39;)[0];
form.onsubmit = function(){
  // to do something
  ···
  // 阻止页面跳转
  return false;
}

</script>

Copy after login

•Use h5 related methods.

<script>
var form = document.getElementsByTagName(&#39;form&#39;)[0];
form.onsubmit = function(event){
  // to do something
  ···
  // 阻止页面跳转
  event.preventDefault();
}

</script>

Copy after login

Other operation processing can be consistent with the one with jump.

Large file upload

Although PHP implements its file upload, it is very convenient and fast. But the size of uploaded files is not unlimited. By default, there are two factors that limit the size of the files we upload.
•The extreme value of post
•The extreme value of upload
We can control the upload file size by manually changing the php.ini configuration information.

POST extreme value

post_max_size = 200M

upload extreme value

upload_max_filesize=200M

Upload details

The ajax object has an attribute called upload, and upload also exists as an object. It has a method called onprogress. We can monitor this method to see the percentage of the file upload process.

Front-end page

<!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>

Copy after login

Backend processing

<?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;];  
}
?>

Copy after login

Remember to ensure The existence and path of the upload folder are problematic.

Summary

File uploading is a very basic function, and it is not very complicated to implement. But this function is so important. We can easily modify the user's avatar and other file information through file upload.

The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

phpDetailed graphic and text explanation of the method of obtaining the number of days of the month and date array according to the year and month

PHP realizes multi-image upload combined with uploadify plug-in idea analysis

PHP realizes acquisition How to specify the day of the week for a date

The above is the detailed content of How to upload attachments without refreshing using PHP Ajax. For more information, please follow other related articles on the PHP Chinese website!