Upload Image Preview function with HTML5 file API

Upload Image Preview function with HTML5 file API

A few days ago to do a project, involving the ability to upload local images, just before the HTML5 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.

<script> window. URL = window. URL | |    Window.webkiturl;    var Fileelem = document.getElementById ("Fileelem"), FileList = document.getElementById ("FileList");        function Handlefiles (obj) {var files = obj.files, img = new Image (); if (window.            URL) {//file API alert (files[0].name + "," + files[0].size + "bytes"); img.src = window. Url.createobjecturl (Files[0]);            Create an object URL, not your local path img.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 createobjecturl/revokeobjecturl methods.            We use FileReader object to deal with var reader = new FileReader ();            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{//ie obj.select ();            Obj.blur ();            var nfile = 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>

Upload picture preview function with HTML5 file API