JavaScript HTML5 file upload filereader api_javascript tips

File upload is now becoming more and more common, all social networking sites, media sites, such as Youku video, micro-blog, etc., all provide upload pictures, upload video and other functions. But in the past, web programmers know that uploading files with HTML forms can be a hassle, especially if you want to know some of the properties of a user's uploaded file, and you'll have to wait until it's uploaded.

Unknown things uploaded to the server, it is possible to create security problems, there may be too large, more than allowed, wasting space. Now that the Web technology is progressing, HTML5 has brought a lot of good things. This FileReader API allows you to get some basic attributes of uploaded files before users can upload them.

HTML code

This FileReader API works like the file API, and requires the use of the input[type= "file" element:

<--a form that can upload multimedia files-->
<input type= "file" id= "Upload-file" multiple/> The

place where the picture is displayed <--
<div id= "Destination" ></div>

In this article, the file API contains detailed information about the files that can be read, such as address, size, size, file type, and so on.

Javascript

In this example, we use the Input form field to upload a picture, when the user selected a picture in their own computer, the picture will be displayed on the page:

document.getElementById (' Upload-file '). AddEventListener (' Change ', function () {
 var file;
 var destination = document.getElementById (' destination ');
 destination.innerhtml = ';

 Circular user multiple selected file for
 (var x = 0, Xlen = this.files.length x < Xlen x + +) {
 file = this.files[x];
 if (file.type.indexOf (' image ')!=-1) {//very simple to submit

  var reader = new FileReader ();

  Reader.onload = function (e) {
  var img = new Image ();
  IMG.SRC = E.target.result; Displays the picture of the Place

  Destination.appendchild (IMG);
  };
  
  Reader.readasdataurl (file);}}
);

In this example, we use the Readasdataurl method in FileReader to convert the picture content into a base64 encoded string, and then display it using the image's data URI. Other FileReader reading methods include Readastext, Readasarraybuffer and readasbinarystring.

With this filereader API, we can prevent users from uploading files to the server, and we can operate them on the browser client. It is necessary to preprocess these before uploading to the server.

The above is the entire content of this article, I hope to help you learn.