[]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):

Code:

<div style="border:2px dashed red;"> <p>preview images before uploading:<input type="file"Id="xdatanfileimg"Onchange="xmtanuploadimg (This)"accept="image/*"/> <input type="Button"Value="Hide Pictures"onclick="document.getElementById (' xmtanimg '). style.display = ' None ';"/> <input type="Button"Value="Show Pictures"onclick="document.getElementById (' xmtanimg '). style.display = ' block ';"/> </p> "xmtanimg"/> <div id="Xmtandiv"></div> </div> "Text/javascript">//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 nowfunction xmtanuploadimg (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 ("successfully read ...."); 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:

<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 Filefunction Xmtanuploadfile (obj) {if(Obj.files.length <1)return; varFile = obj.files[0]; if(File.size >1024x768*1024x768) {alert ("file is more than 1M, too big, small! "); Obj.value=""; return; }            }            //read the file as a binaryfunction readasbinarystring () {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 textfunction Readastext () {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,.txt,.cs,.xml"Onchange="Xmtanuploadfile (This)"/> <input type="Button"Value="read into binary data"onclick="readasbinarystring ()"/> <input type="Button"Value="read into text data"onclick="Readastext ()"/> <input type="Button"Value="Hide 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

<div style="text-align:center; padding:5px 20px;width:70%;"> "xmtanshowimg"Src=""/> "javascript:void ()"Download="girl.jpg"Id="Xmtandownload"> Click here to download </a>"Text/javascript">//The picture turns into base64 bit string data            varImgdata ="data:image/png;base64,........."; //or directly set the image link: var imgdata = "Images/picture.png";document.getElementById ("xmtanshowimg"). SetAttribute ("src", Imgdata);//set src for a picture labeldocument.getElementById ("Xmtandownload"). SetAttribute ("href", Imgdata);//set href for a tag</script>

Original link: http://www.cnblogs.com/tandaxia/p/5125275.html

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