Ajax File Upload practice and analysis, with HTML5 file upload API.

For HTML5 already support Ajax file upload, but if need to be compatible with a little bit of skill, HTML5, etc., first to see how we wrote before.

There might be something called Ajax file upload plugin, But before AJAX2.0 is impossible to achieve, because the browser reason, Ajax can not get the file information, of course, here is not to say can not file upload, just said in AJAX2.0 before the so-called Ajax file upload is fake, the core is not used Ajax, but the use of IFRAME implementation, we come to See how to use an IFRAME to implement a page without a flush upload file.

IFrame upload file version without flushing.

Html:

<form action= "http://127.0.0.1/index.php" method= "POST" target= " postfile" enctype= "Multipart/form-data ">
<input type= "file" Name= "FS" >
<input type= "Submit" value= "Upload" >
</form>
<iframe name= "Postfile " frameborder= "0" ></iframe>

Php:

<?php
if (empty ($_files)) {
Exit (' empty file ');
}
if ($_files[' FS ' [' Error ']!=0) {
Exit (' upload failed ');
}
Move temporary files to directory a
Move_uploaded_file ($_files[' fs ' [' Tmp_name '], ' A/'. $_files[' fs ' [' Name ']);

echo ' OK ';
?>

Effect:

You can see that the page has not been refreshed.

The principle is to submit the data inside the form into the IFRAME framework.

The user is prompted to upload a bit better.

Html:

<style>
#img {
Display:none;
}
</style>

<form action= "http://127.0.0.1/index.php" method= "POST" target= "Postfile" enctype= "Multipart/form-data" >
<input type= "file" Name= "FS" >
<input type= "Submit" value= "Upload" >
</form>

<iframe name= "postfile" frameborder= "0" ></iframe>
<script>
var form = document.getelementsbytagname (' form ') [0];
var img = document.getElementById (' img ');
　　Form.onsubmit = function () {
Img.style.display = ' block ';
};
</script>

Php:

<?php
if (empty ($_files)) {
Exit (' empty file ');
}
if ($_files[' FS ' [' Error ']!=0) {
Exit (' upload failed ');
}

Move temporary files to directory a
Move_uploaded_file ($_files[' fs ' [' Tmp_name '], ' A/'. $_files[' fs ' [' Name ']);

After the file upload is successful, you will be prompted to hide.

Echo ' <script>parent.document.getelementbyid ("img"). style.display= "None";</script> ';

echo ' OK ';
?>

Ok. However, this approach can be achieved but somewhat inadequate, such as unable to know how much the file is uploaded. The next introduction to HTML5 's new API is very powerful.

HTML5 adds a new Formdata object that can be used to manipulate the form.

Example 1: Uploading a file

<form action= "http://127.0.0.1/index.php" method= "POST" enctype= "Multipart/form-data" >
<input type= "file" Name= "FS" >
<input id= "btn" type= "button" value= "Upload" >
</form>

<script>
var form = document.getelementsbytagname (' form ') [0];
var btn = document.getElementById (' btn ');
var img = document.getElementById (' img ');

Btn.onclick = function () {
　　var formData = new FormData (form);
Ajax (FormData);

Img.style.display = ' block ';
};

function Ajax (data) {
var xhr = new XMLHttpRequest ();
Xhr.open (' POST ', ' http://127.0.0.1/index.php ');
　　Xhr.send (data);
Xhr.onreadystatechange = function () {
if (this.readystate===4 && this.status===200) {
if (this.responsetext=== ' 1 ') {
PARENT.DOCUMENT.GETELEMENTBYID ("img"). style.display= "None";
Console.log (' OK ');
}
}
};
}
</script>

Simply only son the form table into the FormData and it will be handled internally. In addition to uploading files,FormData also has a lot of features, such as before we submit a form to the value of an operation form, and now we can achieve the same result by directly writing into the form, together to see.

Like uploading pictures, no code is posted.

In addition to this, Formdata also allows you to create data manually.

Here's how to use it:

var formData = new FormData ();
Formdata.append (' sex ', ' male ');

I have to say that this method is still very powerful, we can do a lot of things with this method.

A new files property is also added to the file to see.

Through the Files property we can get the size of the file and filename, etc., you can also upload this object in Formdata when the file upload.

With it we can also do picture preview function Oh, but need to match window. Url.createobjecturl to operate.

var f = document.getElementById (' f '). Files[0];

var img = new Image ();
img.src = window. Url.createobjecturl (f);
Document.body.appendChild (IMG);

Ok.

Ajax File Upload practice and analysis, with HTML5 file upload API.