Próbuję załadować plik tekstowy do mojego pliku JavaScript, a następnie odczytać linie z tego pliku, aby uzyskać informacje, a ja wypróbowałem FileReader, ale wydaje się, że nie działa. Czy ktoś może pomóc?Jak odczytać plik tekstowy w JavaScript
function analyze(){
var f = new FileReader();
f.onloadend = function(){
console.log("success");
}
f.readAsText("cities.txt");
}
Tak to jest możliwe z FileReader, mam już zrobione przykład tego, oto kod:
<!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>
Możliwe jest również, aby zrobić to samo obsługuje niektórych starszych wersji IE (chyba 6 -8) używając ActiveX Object, miałem trochę starego kodu, który też to robi, ale to już czas, więc będę musiał go wykopać. Znalazłem rozwiązanie podobne do tego, którego użyłem dzięki uprzejmości Jacky Cui's blog i zredagowałem ta odpowiedź (również trochę wyczyściła kod). Mam nadzieję, że to pomoże.
Wreszcie, po prostu przeczytałem kilka innych odpowiedzi, które pobiły mnie do losowania, ale jak sugerują, być może szukasz kodu, który pozwala załadować plik tekstowy z serwera (lub urządzenia), gdzie znajduje się plik JavaScript . Jeśli to przypadek to chcesz kod AJAX załadować dynamicznie dokument, który będzie coś w następujący sposób:
<!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>
Dzięki za post! Jest jednak coś, czego nie rozumiem: dlaczego zamiast "e.target" nie używa się "czytnika" lub "tego", podczas gdy wszystkie odnoszą się do obiektu 'FileReader': ** [demo] (http: // jsfiddle.net/Mori/tJBHZ/)**. – Mori
Dla "tego" słowa kluczowego, tak naprawdę jest to rzecz osobistych preferencji, chyba że jest to element, którego nie przeszkadzam ... http://tech.pro/tutorial/1192/avoiding-the-this-problem -in-javascript Co do "czytnika", tak, to może być słuszny punkt, ale znowu, wolę nie używać przedmiotu w sposób, który "czyta" myląco. Jeśli istnieje wiele sposobów odwoływania się do obiektu, chciałbym powiedzieć, że najlepiej będzie później czytać. – bcmoney
Javascript nie ma dostępu do systemu plików użytkownika ze względów bezpieczeństwa. FileReader dotyczy tylko plików wybranych ręcznie przez użytkownika.
Zakłada się, że OP mówi o pliku na komputerze klienta. Jeśli jest to coś dostępnego na serwerze, można go załadować za pośrednictwem AJAX. –
Można to zrobić dość łatwo przy użyciu JavaScript XMLHttpRequest() klasy (Ajax):
function FileHelper()
{
FileHelper.readStringFromFileAtPath = function(pathOfFileToReadFrom)
{
var request = new XMLHttpRequest();
request.open("GET", pathOfFileToReadFrom, false);
request.send(null);
var returnValue = request.responseText;
return returnValue;
}
}
...
var text = FileHelper.readStringFromFileAtPath ("mytext.txt");
nie działa dla mnie – Daniel
mój przykład
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
</head>
<body>
<script>
function PreviewText() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadTextValue").value = oFREvent.target.result;
document.getElementById("obj").data = oFREvent.target.result;
};
};
jQuery(document).ready(function(){
$('#viewSource').click(function()
{
var text = $('#uploadTextValue').val();
alert(text);
//here ajax
});
});
</script>
<object width="100%" height="400" data="" id="obj"></object>
<div>
<input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
<input id="uploadText" style="width:120px" type="file" size="10" onchange="PreviewText();" />
</div>
<a href="#" id="viewSource">Source file</a>
</body>
</html>
Przeczytaj: http://www.html5rocks.com/en/tutorials/file/dndfiles/. Jeśli jest to plik lokalny, użytkownik musi sam wybrać plik ze względów bezpieczeństwa. Powiązane: http://stackoverflow.com/questions/13428532/using-a-local-file-as-a-data-source-in-javascript – NullUserException