PHP AJAX implementation without refreshing attachment upload _php tips

For a website, there is a basic indispensable function, that is file upload. The use of PHP preloading to achieve file upload is a unique advantage, then today, together to do a no refresh implementation of the file upload it.

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

General form

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

Background processing

Print_r ($_post);
$username = $_posy[' username '];
$password = $_post[' password '];
$email = $_post[' email '];

On the server and the database content information, to achieve the relevant business logic.

···

A form with a file

There is a big difference between a form with a file and a plain form, and first we have to declare a property on the form, as follows:

<form enctype= ' Multipart/form-data ' >

To tell the server that the form we are uploading contains file information.

Refresh Mode

When it comes to refresh mode, that is, after clicking Submit, the page jumps to the business processing interface. This is also the data submission of forms that we implement in a common 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"/>

Background page

Background processing In addition to ordinary form data, the most important thing is to process file information. PHP built-in a function, you can easily upload files from the temporary data area to our target folder, implementation of the business logic upload.

Move_uploaded_file (' Temporary file path ', ' target file path ');

No Refresh Mode

The only difference between using the No Refresh method and using the Refresh method is to block the page from jumping, which we usually do in two ways.
• Add return False at the end of the form submission event.

<script>
var form = document.getelementsbytagname (' form ') [0];
Form.onsubmit = function () {
  //To do something
  • · Block page jump return
  false;
}

</script>

• Use H5 related methods.

<script>
var form = document.getelementsbytagname (' form ') [0];
Form.onsubmit = function (event) {
  //To do something
  •
  · Block page Jump
  event.preventdefault ();
}

</script>

Other operations and with the jump to maintain the same.

Large File Upload

Although the PHP implementation of its file upload is very convenient, but also very fast. But the size of the uploaded file is not unlimited. By default, there are two factors that limit the size of the file we upload.
The extreme value of post
The extreme value of upload
We can manually change the php.ini configuration information to achieve the size of the upload file control.

Post Extremum

Post_max_size = 200M

Upload Extreme Value

upload_max_filesize=200m

Upload Details

Ajax objects have a property called upload, and upload also exists as an object. It has a method called onprogress, and we can monitor this method to see the percentage of the file upload process.

Front Page

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Background processing

<?php
//print_r ($_post);
echo "---------------------". <BR> ";
Print_r ($_files);


The storage location of the attachment, the name of the attachment, remember that there must be a upload folder
$path = ". /upload/";

Gets the original name of the file
$origin _name = $_files[' photo ' [' name '];
The name that is spliced into the file on the server
$server _name = $path. $origin _name;

if ($_files[' photo '] [' Error ']>0 ') {
  die ("Wrong!") ". $_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 '];  
}
? >

Remember to ensure the existence of upload folders and path issues.

Summarize

File upload is a very basic function, the implementation is not very complicated. But this function is so important, we can easily through the file came together to modify the user's such as Avatar, as well as other file information.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.