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>preview images before uploading:<input type= "File" id= "xdatanfileimg" onchange= "xmtanuploadimg (This)" accept= "image/*"/> <input ty Pe= "button" value= "Hide Picture" onclick= "document.getElementById (' xmtanimg '). style.display = ' none ';" /> <input type= "button" value= "Show Picture" onclick= "document.getElementById (' xmtanimg '). style.display = ' bl ' Ock '; " /> </p> <div id= "Xmtandiv" ></div> </div> //determine if the browser supports the FileReader interface if(typeofFileReader = = ' undefined ') {document.getElementById ("Xmtandiv"). InnerHTML = "; //make the selection control not operationaldocument.getElementById ("Xdatanfileimg"). SetAttribute ("Disabled", "disabled"); } //Select picture, preview now functionxmtanuploadimg (obj) {varFile = Obj.files[0]; Console.log (obj); console.log (file); Console.log ("File.size =" + file.size);//file.size Unit is byte varReader =NewFileReader (); //read File procedure methodReader.onloadstart =function(e) {Console.log ("Start reading ...."); } reader.onprogress=function(e) {Console.log ("Reading in progress ...."); } reader.onabort=function(e) {Console.log ("Interrupt read ...."); } reader.onerror=function(e) {Console.log ("Read exception ...."); } reader.onload=function(e) {Console.log ("Read successfully ...."); varimg = document.getElementById ("xmtanimg"); IMG.SRC=E.target.result; //or img.src = This.result; E.target = = this} reader.readasdataurl (file)}</script>
-------------------------------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 the FileReader interface if(typeofFileReader = = ' undefined ') {document.getElementById ("Xmtancontentdiv"). InnerHTML = "<p> current browser does not support FileReader interface! </p> "; document.getElementById ("Xmtanfile"). SetAttribute ("Disabled", "disabled"); } //Select File functionxmtanuploadfile (obj) {if(Obj.files.length < 1)return; varFile = Obj.files[0]; if(File.size > 1024 * 1024) {alert ("The file is bigger than 1M, it's too big, just a little bit!" "); Obj.value= ""; return; } } //read the file as a binary functionreadasbinarystring () {varobj = document.getElementById ("Xmtanfile"); if(Obj.files.length < 1)return; varFile = Obj.files[0]; varReader =NewFileReader (); //read the file into the page in binary formreader.readasbinarystring (file); Reader.onload=function(f) {document.getElementById ("Xmtancontentdiv"). InnerHTML = This. Result; } } //read file as text functionReadastext () {varobj = document.getElementById ("Xmtanfile"); if(Obj.files.length < 1)return; varFile = Obj.files[0]; varReader =NewFileReader (); //read the file into the page as textreader.readastext (file); 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 into binary data "onclick=" Readasbina Rystring () "/> <input type=" button "value=" read into text data "onclick=" Readastext () "/> <input Typ E= "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>
Original link: http://www.cnblogs.com/tandaxia/p/5125275.html
HTML file Tag---Image preview before uploading--filereader