我试图将文本文件加载到我的JavaScript文件中,然后从该文件中读取行以获取信息,我尝试使用FileReader,但它似乎无法正常工作。有人可以帮忙吗?
function analyze(){ var f = new FileReader(); f.onloadend = function(){ console.log("success"); } f.readAsText("cities.txt"); }
是的,可以使用FileReader,我已经做了一个示例,这是代码:
<!DOCTYPE html> <html> <head> <title>Read File (via User Input selection)</title> <script type="text/javascript"> var reader; //GLOBAL File Reader object for demo purpose only /** * Check for the various File API support. */ function checkFileAPI() { if (window.File && window.FileReader && window.FileList && window.Blob) { reader = new FileReader(); return true; } else { alert('The File APIs are not fully supported by your browser. Fallback required.'); return false; } } /** * read text input */ function readText(filePath) { var output = ""; //placeholder for text output if(filePath.files && filePath.files[0]) { reader.onload = function (e) { output = e.target.result; displayContents(output); };//end onload() reader.readAsText(filePath.files[0]); }//end if html5 filelist support else if(ActiveXObject && filePath) { //fallback to IE 6-8 support via ActiveX try { reader = new ActiveXObject("Scripting.FileSystemObject"); var file = reader.OpenTextFile(filePath, 1); //ActiveX File Object output = file.ReadAll(); //text contents of file file.Close(); //close file "input stream" displayContents(output); } catch (e) { if (e.number == -2146827859) { alert('Unable to access local files due to browser security settings. ' + 'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' + 'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"'); } } } else { //this is where you could fallback to Java Applet, Flash or similar return false; } return true; } /** * display content using a basic HTML replacement */ function displayContents(txt) { var el = document.getElementById('main'); el.innerHTML = txt; //display output in DOM } </script> </head> <body onload="checkFileAPI();"> <div id="container"> <input type="file" onchange='readText(this)' /> <br/> <hr/> <h3>Contents of the Text file:</h3> <div id="main"> ... </div> </div> </body> </html>
最后,我只是读了其他一些吸引我的答案,但正如他们所建议的那样,您可能正在寻找使您能够从JavaScript文件所在的服务器(或设备)加载文本文件的代码。如果是这种情况,那么您希望AJAX代码动态加载文档,如下所示:
<!DOCTYPE html> <html> <head><meta charset="utf-8" /> <title>Read File (via AJAX)</title> <script type="text/javascript"> var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP'); function loadFile() { reader.open('get', 'test.txt', true); reader.onreadystatechange = displayContents; reader.send(null); } function displayContents() { if(reader.readyState==4) { var el = document.getElementById('main'); el.innerHTML = reader.responseText; } } </script> </head> <body> <div id="container"> <input type="button" value="test.txt" onclick="loadFile()" /> <div id="main"> </div> </div> </body> </html>