[]html file Tag---Image preview before uploading--filereader

Remember to do the site, once need to implement a picture uploaded to the server before, preview the function. At that time with the HTML <input type= "file"/> tag has not been implemented, finally discarded the label, using other means to achieve this function.

Today, no intention to discover a knowledge point, with the HTML file tag can be implemented before uploading the image preview, it feels great, record! is through the file tag and JS FileReader interface, the selected picture file Call Readasdataurl method, the image data into Base64 string form displayed on the page.

1, gossip less say, test, picture upload preview (select image):

Implementation code:

<div style= "border:2px dashed red;" > <p> Image Preview before uploading: <input type= "file" id= "xdatanfileimg" onchange= "xmtanuploadimg (This)" accept= "image/*"/> <input type= "button" value= "Hide Picture" onclick= "document.getElementById (' xmtanimg '). sty Le.display = ' None '; " /> <input type= "button" value= "Show Picture" onclick= "document.getElementById (' xmtanimg '). style.display = ' bl ' Ock '; "        /> </p>  <div id= "Xmtandiv" ></div> </div> 
-------------------------------End-----------------------------
2, in addition to the FileReader function Readasdataurl, there are two other functions readasbinarystring and Readastext, respectively, you can read the selected file into binary and text format
Test, select text (TXT, CS, html, JS, CSS, XML), read into binary or text:
Select File:
Implementation code:
<script type= "Text/javascript" >//Determine if the browser supports FileReader interface if (typeof FileReader = = ' undefined ') {document.getElementById ("Xmtancontentdiv"). InnerHTML = "<p> current browser does not support FileReader interface!                </p> ";            document.getElementById ("Xmtanfile"). SetAttribute ("Disabled", "disabled");                }//Select File function xmtanuploadfile (obj) {if (Obj.files.length < 1) return;                                var file = Obj.files[0]; if (File.size > 1024x768) {alert ("file is larger than 1M, it's too big, just a little bit!")                    ");                    Obj.value = "";                Return }}//read file as binary function readasbinarystring () {var obj = Document.geteleme                Ntbyid ("Xmtanfile");                if (Obj.files.length < 1) return;                var file = Obj.files[0];                var reader = new FileReader ();        Read the file into the page in binary form        reader.readasbinarystring (file);                Reader.onload = function (f) {document.getElementById ("Xmtancontentdiv"). InnerHTML = This.result; }}//Read file as text function Readastext () {var obj = Document.getel                Ementbyid ("Xmtanfile");                if (Obj.files.length < 1) return;                var file = Obj.files[0];                var reader = new FileReader ();                Reads the file into the page reader.readastext (file) in text form;                Reader.onload = function (f) {document.getElementById ("Xmtancontentdiv"). InnerHTML = This.result; }} </script> <div style= "border:2px dashed red; padding:20px 0px; " > <label> Select File:</label> <input type= "file" id= "Xmtanfile" accept= ". html,.js,.css,.t Xt,.cs,.xml "onchange=" Xmtanuploadfile (This) "/> <input type=" button "value=" read intoBinary data "onclick=" readasbinarystring () "/> <input type=" button "value=" read into text data "onclick=" Readastext () "/&gt            ; <input type= "button" value= "hides read content" onclick= "document.getElementById (' Xmtancontentdiv '). style.display = ' none ';" /> <input type= "button" value= "show read content" onclick= "document.getElementById (' Xmtancontentdiv '). Style.display = ' block '; /> <div id= "Xmtancontentdiv" ></div> </div>
---------------------------
3 、-----------The Download property of a tag-------------
　　Set a label href as the image link, and then set the Download property, click this link can directly download the picture
　　
Click here to download
Implementation code:
<div style= "Text-align:center; padding:5px 20px;width:70%; " >                        
[]html file Tag---Image preview before uploading--filereader