Sto cercando di caricare un file di testo nel mio file JavaScript e quindi leggere le righe da quel file per ottenere informazioni, e ho provato il FileReader ma non sembra funzionare. Qualcuno può aiutare?Come leggere il file di testo in JavaScript
function analyze(){
var f = new FileReader();
f.onloadend = function(){
console.log("success");
}
f.readAsText("cities.txt");
}
Sì, è possibile con FileReader, ho già fatto un esempio di questo, ecco il codice:
<!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>
E 'anche possibile fare la stessa cosa per sostenere alcune vecchie versioni di IE (credo 6 -8) usando l'oggetto ActiveX, ho avuto qualche vecchio codice che lo fa ma è stato un po 'così dovrò scavarlo fino a Ho trovato una soluzione simile a quella che ho usato per gentile concessione di Jacky Cui's blog e modificato questa risposta (anche ripulito il codice un po '). Spero che sia d'aiuto.
Infine, ho appena letto alcune altre risposte che mi hanno colpito al sorteggio, ma come suggeriscono, si potrebbe essere alla ricerca di codice che consente di caricare un file di testo dal server (o dispositivo) in cui è seduto il file JavaScript . Se questo è il caso, allora si vuole il codice AJAX per caricare il documento in modo dinamico, che sarebbe qualcosa come segue:
<!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>
Grazie per il post! Tuttavia, c'è qualcosa che non capisco: perché non è usato 'reader' o' this' al posto di 'e.target' mentre tutti si riferiscono all'oggetto' FileReader': ** [demo] (http: // jsfiddle.net/Mori/tJBHZ/)**. – Mori
Per "questa" parola chiave, in realtà solo una cosa di preferenza personale, a meno che non sia in linea su un elemento non mi preoccupo molto di questo ... http://tech.pro/tutorial/1192/avoiding-the-this-problem -in-javascript Per quanto riguarda "lettore", sì, questo è un punto valido che potrebbe essere, ma, di nuovo, preferisco non usare un elemento in un modo che "legga" in modo confuso. Se ci sono diversi modi per fare riferimento a un oggetto, direi di andare per quello che ti è più comodo leggendo in seguito. – bcmoney
Javascript non ha accesso al filesystem dell'utente per motivi di sicurezza. FileReader è solo per i file selezionati manualmente dall'utente.
Si presume che OP stia parlando di un file sul computer client. Se è qualcosa disponibile sul server, può essere caricato tramite AJAX. –
Questo può essere fatto facilmente utilizzando JavaScript XMLHttpRequest() della classe (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");
non ha funzionato per me – Daniel
il mio esempio
<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>
Leggi: http://www.html5rocks.com/en/tutorials/file/dndfiles/. Se si tratta di un file locale, l'utente deve selezionare il file stesso per motivi di sicurezza. Correlato: http://stackoverflow.com/questions/13428532/using-a-local-file-as-a-data-source-in-javascript – NullUserException