JavaScrip读取本地文件
<!DOCTYPE html> <meta charset="utf-8"><title>JavaScript Read File</title> <style type="text/css"> *{ padding:0; margin:0; }#fileContent{width:500px;height:300px;border:solid 1px blue;}section{display:inline-block;}#file-list,#file-img,#file-xml{display:inline-block;width:500px;height:300px;border:solid 1px red;}</style> <script type="text/javascript"> function readLocalFile () {//alert("start...");var localFile = document.getElementById("uploadFile").files[0];//alert(uploadFile);//alert(localFile.name);//alert(localFile.type);//alert(localFile.size);var reader = new FileReader();//Uncaught SyntaxError:Unexpected identifiervar content;reader.onload = function(event) {content = event.target.result;//alert(content);document.getElementById("fileContent").value = content;}reader.onerror = function(event) {alert("File could not be read! Code " + event.target.error.code);}reader.readAsText(localFile,"GB2312");//content = reader.readAsText(uploaFile,"UTF-8");//}</script> </head> <body> <section><input type="file" id="uploadFile"/><input type="button" value="readFile" onclick="readLocalFile();"/><br/><textarea id="fileContent" ></textarea></section><section id="file-list" ></section><section id="file-img"></section><section id="file-xml"></section><script>//文本显示，拖拽文本文件至该区域内即可var target = document.getElementById("file-list");target.addEventListener("dragover", function(event) {event.preventDefault();}, false);target.addEventListener("drop", function(event) {// cancel default actions///Uncaught TypeError:Cannot call method 'addEventListnener' of nullevent.preventDefault();var i = 0,files = event.dataTransfer.files,len = files.length;var reader = new FileReader();for (; i < len; i++) {//document.getElementById("file-list").innerText=document.getElementById("file-list").innerText + "fileName:" + files[i].name //+ " Type:" + files[i].type + " Size:" + files[i].size + "bytes"//console.log("Filename: " + files[i].name);//console.log("Type: " + files[i].type);//console.log("Size: " + files[i].size + " bytes");reader.onload = function (event) {document.getElementById("file-list").innerText = event.target.result;}reader.onerror = function (event) {alert("error");}reader.readAsText(files[i],"GB2312");}}, false);//图片显示，拖拽图片至该区域内即可var targetImg = document.getElementById("file-img");targetImg.addEventListener("dragover",function (event) {event.preventDefault();},false);targetImg.addEventListener("drop",function (event) {event.preventDefault();var file = event.dataTransfer.files[0];//alert(file.name);var readerImg = new FileReader();readerImg.onload = function (event) {var imgUrl = event.target.result;var img = document.createElement("img");img.src = imgUrl;document.getElementById("file-img").appendChild(img);img.style.width="400px";img.style.height="300px";}readerImg.onerror = function (event) {alert("errorImg");}readerImg.readAsDataURL(file);},false);//xml文件读取，拖拽文件至该区域内即可var targetXml = document.getElementById("file-xml");targetXml.addListener("dragover",function (event) {event.preventDefault();},false);targetXml.addListener("drop",function (event) {},false);</script></body> </html>