How to preview a picture to be uploaded-using H5 's FILEAPI

Source: Internet
Author: User

The thing that is going to be said is not new.

Reference: Reading files in JavaScript using the File APIs (given the author's presence in the United States, I would assume that the author's native language is English, of course there are localized in the link to choose Chinese)

What effect to do, that is, the page has a <input type= "file"/> After the user chooses the image to upload, the page displays the image that will be uploaded.

Previously, Ajax was required to upload the original image to the server, and after a successful response, a picture was added to the page. If users find that the upload is wrong, they need to delete the corresponding picture on the server.

Now, you can do this, first on the code:

Document.queryselector (' #upfile '). onchange =function(evt) {varFiles;  for(vari = 0, F; f = files[i]; i++){        if(!f.type.match (' image.* '))Continue; varReader =NewFileReader (); Reader.onload= (function(thefile) {return function(e) {varimg = document.createelement (' img '));;; Document.body.appendChild (IMG); //Where do you want to plug in?}}) (f);    Reader.readasdataurl (f); }  }
1Document.queryselector (' #upfile '). onchange =function () {2     varFileReader =NewFileReader ();3Filereader.onload =function(e) {4         if(Filereader.readystate = =filereader.done) {5             varimg = document.createelement (' img '));6IMG.SRC = This. Result;7Document.body.appendChild (IMG);//example is simply inserting the body8         }9     }Ten     //load multiple files at once One     vari = 0, src = This. Files; A Filereader.readasdataurl (Src[i]); -Filereader.onloadend =function () { -i++; the         if(I <src.length) Filereader.readasdataurl (Src[i]); -     } -}
I wrote it, and you don't look at it.

  Reprint Please specify source:

Corresponding HTML node: <input type= "file" id= "Upfile" multiple/> (if you do not use multiple selection to remove multiple)

The key to this code is on the FileReader object being instantiated, FileReader includes four options to read the file asynchronously:

    • Filereader.readasbinarystring (file| BLOB)//result will contain data in the form of a binary string
    • Filereader.readastext (file| Blob, [encoding])//result will contain data in the form of a string, the encoding format default Utf-8, which can be specified by the encoding parameter
    • Filereader.readasdataurl (file| BLOB)//result will contain data in the form of a data URL
    • Filereader.readasarraybuffer (file| BLOB)//result will contain data in the form of Arraybuffer

After calling a method, there will be Onloadstart, OnProgress, onload, Onabort, onerror and Onloadend events.

How to preview a picture to be uploaded-using H5 's FILEAPI

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: 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.