Preview an uploaded file

I. Industry Status Quo AnalysisSometimes we need to provide the image preview function for users before uploading images. Before HTML5 specifications are available, we need to use flash or browser plug-ins to meet this requirement due to the lack of native file API support. With HTML5, we can use the URL or filereader object to implement the preview function. II. Application scenariosImage Sharing applications, such as Flickr and Facebook. Album application, such as QQ album. Although mailbox 139 does not have a suitable application scenario, the results of pre-research can be used as a technical reserve, and there is always a time to use good things. Iii. coding implementationMethod 1: Window. url(1) Take a look: (2). the HTML is as follows:

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files);this.value=‘‘;"><a href="#" id="fileSelect">Select some files</a> <div id="fileList">  <p>No files selected!</p></div

(3). The JS Code is as follows:

Window. url = Window. URL | window. webkiturl; var fileselect = document. getelementbyid ("fileselect"), fileelem = document. getelementbyid ("fileelem"), filelist = document. getelementbyid ("filelist"); fileselect. addeventlistener ("click", function (e) {If (fileelem) {// click fileselect to call the click event of input type = 'file' to bring up the file selection box. Isn't it nice? // For earlier browsers, you must click input type = 'file' to bring up the file selection box. I have introduced the solution fileelem in the post on normal file upload. click ();} // The href attribute value of our a tag is "#". You need to prevent the default browser behavior E. preventdefault () ;}, false); function handlefiles (Files) {If (! Files. Length) {filelist. innerhtml = "<p> no files selected! </P> ";} else {var list = document. createelement ("Ul"); For (VAR I = 0; I <files. length; I ++) {var li = document. createelement ("Li"); list. appendchild (LI); var IMG = document. createelement ("IMG"); // generate a file identifier and point it to the IMG's src attribute IMG. src = Window. URL. createobjecturl (files [I]); IMG. height = 200; IMG. onload = function (e) {// release the Memory Window occupied by the file identifier. URL. revokeobjecturl (this. SRC);} li. appendchild (IMG); var info = document. createelement ("span"); info. innerhtml = files [I]. name + ":" + files [I]. size + "bytes" + ":" + files [I]. type; Li. appendchild (Info);} filelist. appendchild (list );}}

 

(4) method description: CreateobjecturlEach time you call this method, a unique string of the Identity file will be generated for the file. Multiple calls to this method will generate different strings even if the parameter is the same file. Therefore, we need to release the memory occupied by the file ID. When the page is destroyed, it is automatically released. However, if the page is dynamically generated, we usually use scripts to remove the DOM containing the preview image. When removing the Dom, we need to manually release the memory. But the official recommendation is to bind images. OnloadEvent to release the memory after the image is loaded. RevokeobjecturlRelease the memory occupied by the file identifier, usually in the image OnloadIn the event handler, call this method (5) and check the DOM structure. The src attribute of the IMG Tag points to String starting with BLOB: Method 2: Filereader(1) Take a look: (2). the HTML code is as follows:

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files);this.value=‘‘;"><a href="#" id="fileSelect">Select some files</a> <div id="preview"></div>

(3). The JS Code is as follows:

　　　　function handleFiles(files) {            var previewEle = document.getElementById("preview");            for (var i = 0; i < files.length; i++) {                var file = files[i];                var imageType = /image.*/;                 if (!file.type.match(imageType)) {                    continue;                }                 var img = document.createElement("img");                img.classList.add("obj");                img.file = file;                img.width = ‘300‘;                 previewEle.appendChild(img);                 var reader = new FileReader();                reader.onload = (function(aImg) {                    return function(e) {                        aImg.src = e.target.result;                    };                })(img);                reader.readAsDataURL(file);            }        }

 

(4) Check the DOM structure. The src attribute of the IMG tag is the base64 code of the image: Iv. ReferencesHttps://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications