"Xiao Yue Blog" with the HTML5 file API upload Image Preview function

Some time ago to do a project, involving the uploading of local images and preview features, just before the HTML5(click to see more about the Web front-end resources) can upload local images, and then online to see some of the demo combined with their own needs, finally fix. PS: I have to admit how lazy I am, I always do not take the initiative to learn when there is no need. Mobile full support OH ! has been tested.

Let's show you the code.

First: HTLM part (not to do the beautiful style here, we focus on learning function)

 <  input  type  = "File"   ID  = "Fileelem"   multiple accept  = "image/*"   onchange  = "handlefiles (This)"  >  <  div  id  = "FileList"   style  = "width:200px;height:200px;"  ></ div  >  

Note: If you want to write a very beautiful kind of upload button, tell everyone my writing is analog upload, that is, under input decided to locate a picture (upload button), input width and picture color value of the same size, transparency is 0, and finally do not forget the order of Z-index involved.

Second: JS using H5 new function processing upload

JS implementation of the image pre-upload preview function, mainly using the HTML5 Files API implementation, IE can be compatible with some functions, in Firefox and Chrome under normal operation. HTML5 's file input tag supports multiple and accept, the previous property controls multiple file selections, and the latter controls the type of uploaded files. Learn more about the file API and check it out for yourself.

If you do not understand please check the note, or give me a message can be.

Annotations:

Here, let's talk about the idea (my own understanding):

1. First img.src = window. Url.createobjecturl (Files[0]) is the local path we created, set for local previews.
2. Second, we're involved in H5 uploading. So our first step is to read the information of this picture Reader.onload This method is to read the IMG information data
3. When the read is successful, the uploaded backend interface can be invoked to handle where the file is uploaded.

<script>window. URL= window. URL | |Window.webkiturl; varFileelem = document.getElementById ("Fileelem"), FileList= document.getElementById ("FileList"); functionhandlefiles (obj) {varFiles =obj.files, img=NewImage (); if(window. URL) {//File APIAlert (Files[0].name + "," + files[0].size + "bytes"); IMG.SRC= window. Url.createobjecturl (Files[0]);//create an object URL, not your local pathImg.width = 200; Img.onload=function(e) {window. Url.revokeobjecturl ( This. SRC);//after the picture is loaded, release the object URL} filelist.appendchild (IMG); }Else if(window. FileReader) {//Opera does not support the Createobjecturl/revokeobjecturl method. We use FileReader objects to handle            varReader =NewFileReader (); Reader.readasdataurl (files[0]); Reader.onload=function(e) {alert (files[0].name + "," +e.total + "bytes"); IMG.SRC= This. Result; Img.width= 200;            Filelist.appendchild (IMG); }        }Else{            //IEObj.select ();            Obj.blur (); varNfile =Document.selection.createRange (). text;            Document.selection.empty (); IMG.SRC=nfile; Img.width= 200; Img.onload=function() {alert (nfile+ "," +img.filesize + "bytes");        } filelist.appendchild (IMG); }    }</script>

PS:: Everyone in use when there is any problem in time to give me feedback, I write is certainly not good, in fact, I would like to learn how to upload a number of functions. But this is the only place that can be shared at this stage.

"Xiao Yue Blog" with the HTML5 file API upload Image Preview function