2013-06-04 4 views
3

Я пробовал использовать javascript для открытия текстового файла и получить его имя и его контент, поэтому прямо сейчас я застрял в строке, потому что я использовал файл типа ввода для получения каталога/пути.Получить содержимое текстового файла с помощью javascript

В любом случае, мой вопрос, что не так в следующем коде, и как я могу получить содержимое текстового файла с помощью javascript?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Display Text Files</title> 
<script type="text/javascript"> 
    var str = document.getElementById('txt').value; 
    function display() { 
     if (str != "") { 
      var filename = str.split("/").pop(); 
      document.getElementById('filename').innerHTML = filename; 
     } 
    } 
</script> 
</head> 
<body> 
<form method="get" action="#" > 
    <input type="file" accept="text/plain" id="txt" /> 
    <input type="submit" value="Display Text File" onclick="display();" /> 
</form> 
<a href="#" id="filename"></a> 
</body> 
</html> 

EDIT: Я также хочу отключить в файле ввода на все файлы Opition (*), чтобы только текстовые файлы (.txt).

Спасибо!

+3

Вы не можете загрузить локальный файл с помощью JavaScript. Пользователю придется загружать на сервер, а затем обрабатывать серверный язык, например PHP. – landons

+0

Я не собирался загружать файл. Я хотел получить только его контент, если это важно, я тоже могу использовать xml. – copypaste

+0

Вы не можете читать локальные файлы с помощью javascript. – BrunoLM

ответ

11

Современные браузеры, реализующие FileReader, могут это сделать. Чтобы проверить ваш браузер, проверьте, определено ли значение window.FileReader.

Вот код, который я написал только сегодня утром, чтобы сделать именно это. В моем случае я просто перетаскиваю файл на элемент HTML, который здесь упоминается как panel.in1, но вы также можете использовать <input type="file" /> (см. Ссылку ниже).

if (window.FileReader) { 
    function dragEvent (ev) { 
    ev.stopPropagation(); 
    ev.preventDefault(); 
    if (ev.type == 'drop') { 
     var reader = new FileReader(); 
     reader.onloadend = function (ev) { panel.in1.value += this.result; }; 
     reader.readAsText (ev.dataTransfer.files[0]); 
    } 
    } 

    panel.in1.addEventListener ('dragenter', dragEvent, false); 
    panel.in1.addEventListener ('dragover', dragEvent, false); 
    panel.in1.addEventListener ('drop', dragEvent, false); 
} 

Это reader.onloadend функция, которая получает текст файла, который вы восстановить в обработчик события как this.result.

я получил большую часть механизма о том, как сделать это с MDN: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Смежные вопросы