Ajax and HTML5 implement asynchronous file upload

Ajax and HTML5 implement asynchronous file upload

In the previous two articles, the XMLHttpRequest object and the iframe pseudo asynchronous file upload were introduced separately. The introduction of the XMLHttpRequest object is no longer introduced here. Previously said that the single Ajax can not achieve file upload, because JS can not operate the host's hard disk to obtain files. But Ajax asynchronous file uploads are possible as browsers gradually support HTML5 (which enables the Ajax asynchronous upload file).

Ajax asynchronous upload Idea

1. Add a Files file list object in HTML5 for file upload tags <input type= ' file ' name= '/> dom, through which we can get files in JS

Information and binary resources.

2. The Formdata object was added to the XMLHttpRequest version 2 to load the form submission key value pairs. can also be used to load file resources.

3.ajax asynchronous upload file, and through its own asynchronous callback function to implement the background upload file prompts display and feedback.

Front file upload.html full code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < head> <title>ajax Asynchronous File upload </title> <meta http-equiv= "Content-type" content=; Charset=utf-8 "/> <meta name=" description "content=" "/> <meta name=" keywords "content=" "/> &l
	   T;script type= "Text/javascript" > Function createxhr () {var xhr=null; if (window.
	   XMLHttpRequest)//If support XMLHttpRequest, then use XMLHttpRequest to generate Object Xhr=new XMLHttpRequest (); else if (window.
	     ActiveXObject)//If the ActiveXObject that supports win uses ActiveXObject to generate objects.
	    Xhr=new ActiveXObject (' microsoft.xmlhttp ');
	 return XHR;
	   function Ajax_upload () {var xhr=createxhr ();
	   var formdata=new formData (); var file=document.getelementsbytagname (' input ') [0].files[0];//get the first file in the file list, HTML5 support multiple files upload var info= ' filename: ' + file.name+ ' file type: ' +file.type+ ' file size: ' +file.size;//get information on files var Showinfo=document.getelementbyid (' sHowinfo ');
	   Showinfo.innerhtml=info;
	   Formdata.append (' pic ', file);//Load Picture file Xhr.open (' POST ', './move_file.php ', true);
	   Xhr.send (FormData); Xhr.onreadystatechange=function () {if (this.readystate==4 && this.status==200) {showinfo.innerhtml =showinfo.innerhtml+ ' <br/> ' +this.responsetext;//puts background hints in the specified div display}} </script>  

Background file move_file.php full code as follows:


<?php
if (empty ($_files)) Die (' upload as empty file ');
if ($_files[' pic '] [' Error ']!=0] die (' Error on file ');
Move_uploaded_file ($_files[' pic '] [' tmp_name '], './'. $_files[' pic ' [' name ']];
Echo ' file uploaded successfully. ';
? >
 

Screenshot below: