JavaScript HTML5 file upload filereader api_javascript tips

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.