HTML5 file domain +filereader read file (ii)

first, read the text file content, specify character encoding

<Divclass= "container">    <!--text File Validation -    <inputtype= "file"ID= "file"multiple Accept = "text/plain" />    <inputtype= "button"ID= "btn1"value= "read file contents"onclick= "showfiles ();" />    <h4>Select the file as Follows:</h4>    <blockquote></blockquote></Div>

Js:

//reading a text file instancevarFilebox = document.getElementById (' file ');functionshowfiles () {//get an array of selected files    varFileList =filebox.files;  for(vari = 0; I < filelist.length; i++) {        varFile =filelist[i];    ReadFile (file); }}//Read File contentsfunctionreadFile (file) {varReader =NewFileReader (); //Chinese Windows system txt text most default encoding GBK    reader.readastext (file, ' GBK '); Reader.onload=function(e) {varresult =reader.result; $('. Container blockquote '). Text (result); }}

second, read or preview customer pictures

<Divclass= "container">    <!--Image Type Verification Method 1 -    <inputtype= "file"ID= "file"Multiple Accept= "image/*" />    <inputtype= "button"ID= "btn1"value= "select upload file"onclick= "showfiles ();" />    <h4>Select the file as Follows:</h4>    <imgsrc=""ID= "img1" /></Div>

Js:

//reading a picture instancevarFilebox = document.getElementById (' file ');functionshowfiles () {//get an array of selected files    varFileList =filebox.files;  for(vari = 0; I < filelist.length; i++) {        varFile =filelist[i]; //Picture Type verification the second way        if(/image\/\w+/. Test (file.type)) readFile (file); ElseConsole.log (file.name+ ': not pictures '); }}//read image content as Dataurl//Reader.readasdataurlfunctionreadFile (file) {varReader =NewFileReader ();    Reader.readasdataurl (file); Reader.onload=function(e) {varresult =reader.result; $('. Container blockquote '). Text (result); $(' #img1 '). attr (' src '), result)}}

Simple example One: http://www.cnblogs.com/tianma3798/p/4355949.html

HTML5 file domain +filereader read file (ii)