HTML5 File Upload Example

Original address:

http://www.webcodegeeks.com/html5/html5-file-upload-example/

This article will show you how to use HTML5 to read user-selected file information and upload the file to a server.

Fileapi is the most interesting of the newly added features of HTML5. We can read the information of the display file before uploading it to the server, and can send the file without using the Post form.

The following shows how to read the file information selected by the user and use Ajax to upload the files asynchronously.

1. displaying file information

1.1: Case with only one file

The HTML code is as follows

When a user chooses a file, the Inpupt element generates a "change" event, so we can listen to the event:

document.getElementById (' Fileinput '). AddEventListener (' Change ', function () {    var file = this.files[0];    This code was only for demo ...    Console.log ("Name:" + file.name);    Console.log ("Size:" + file.size);    Console.log ("type:" + file.type);    Console.log ("Date:" + file.lastmodified);}, False);

As you can see, Fileapi is very simple to use, and it adds the "files" attribute to the INPUT element.

Summary: The files property is not writable and can only read the contents. You may have noticed that using this.files[0] will get the first file that the user has selected.

1.2: Multiple Files

Now we want to display all the file information that the user chooses.

The HTML code is as follows

We only need to add the "multiple" attribute to the INPUT element, which allows the user to select multiple file uploads.

document.getElementById (' Fileinput '). AddEventListener (' Change ', function () {for (var i = 0; i
 
  
Summary: You can also add the "Accept" tab to filter the types of files that users can upload. For example, when you only want users to upload a picture, you only need to filter out the MIME type "image/*":

  

  

  
1.3 Previewing files

  
We can read both the file information and the contents of the file. For example, we can preview a file before uploading it.

  
To preview a picture example:

  
The HTML code is as follows:

  
    
 
        Preview Images    
Upload images ...
  
Use JavaScript to manage file uploads.

  
Gallery.js

  
var uploadfiles = document.queryselector (' #fileinput '); Uploadfiles.addeventlistener (' Change ', function () {var files =    This.files; for (var i=0; i
   
    
The Previewimage function will display the files selected by the user.

    
Gallery.js

    
function Previewimage (file) {    var Galleryid = "Gallery";    var gallery = document.getElementById (Galleryid);    var imageType =/image.*/;    if (!file.type.match (ImageType)) {        Throw "file type must is an image";    }    var thumb = document.createelement ("div");    Thumb.classList.add (' thumbnail '); Add the class thumbnail to the created div    var img = document.createelement ("img");    Img.file = file;    Thumb.appendchild (IMG);    Gallery.appendchild (thumb);    Use FileReader to display picture contents    var reader = new FileReader ();    Reader.onload = (function (aimg) {return function (e) {aimg.src = E.target.result;};}) (IMG);    Reader.readasdataurl (file);}
    
We introduced the FileReader object to read the contents of the file asynchronously. Use the new FileReader to instantiate the object, and then call the Readasurl method to read the file's data.
    
The OnLoad method is called as an event after the end of the file's content reading, and the contents of the file are assigned to the SRC attribute of the image element: Aimg.src = E.target.result;

    


    
2. Uploading Files

    
We use XMLHttpRequest (Ajax) to upload files.

    
Each user-selected file creates an HTTP request to be sent to the server.

    
First, define a method that contains XMLHttpRequest to upload the file.

    
function UploadFile (file) {    var url = ' server/index.php ';    var xhr = new XMLHttpRequest ();    var fd = new FormData ();    Xhr.open ("POST", url, true);    Xhr.onreadystatechange = function () {        if (xhr.readystate = = 4 && Xhr.status = =) {            //every thing OK, File uploaded            Console.log (xhr.responsetext);//Handle response.        }}    ;    Fd.append ("Upload_file", file);    Xhr.send (FD);}
    

    
This method generates an AJAX request (via post) to the specified URL and sends the contents of the file in the "Upload_file" request parameter. We can get this parameter by $_files[' Upload_file ').

    
Now, we'll use the UploadFile method to upload the selected file.

    

    
JS as follows:

    
var uploadfiles = Document.queryselector (' #uploadfiles '); Uploadfiles.addeventlistener (' Change ',    function () {var files = this.files;
  for (var i=0; I 
       
       
  php script is as follows:  
 
       
if (Isset ($_files[' upload_file ')) {if (move_uploaded_file ' $_files[' [' Upload_file '], " Datas/". $_files[' upload_file ' [' name ']) {echo $_files[' upload_file ' [' Name '].    "OK"; } else {echo $_files[' upload_file ' [' Name '].    "KO"; } exit;
  else {echo "No files uploaded ...";} 
                    
       
  3. Download  
 
       
  all source code  
 
       
 The above describes the HTML5 file upload example, including aspects of the content, I hope the PHP tutorial interested in a friend helpful. 
 
       
 