Простой код для чтения локального файла из выделения из раскрывающегося списка и отображения его в текстовом поле (Javascript/XHTML)

Question

Я пытался в течение нескольких дней создать простой код для создания страницы, которая может отображать текстовые файлы из локального каталог. Это спецификации.

• XHTML/Javascript только
• Файлы являются локальными и из того же каталога в качестве домашней страницы
• Файлы находятся в виде TXT/журнала
• Файлы для отображения должны быть выбраны из выпадающего списка
• файлы, которые будут отображаться в текстовой области
• Совместимость для всех веб-браузеров, не могут использовать ActiveXObject

Это была моя самая близкая попытка.

JavaScript

function populate(filename) 
{ 
var file = document.getElementById('log1').files.(0); 
var reader = new FileReader(); 
reader.onload = function(e) 
{ 
    document.getElementById('myTextarea').value = e.target.result; 
}; 
reader.readAsText(file); 
} 

(X) HTML

<div id="source1"> 
    <form id="log1"> 
     Select File from cng1wlsbe1b:<br /> 
     <select name="file1"> 
      <option value="CCS1be1" onclick="populate('log1','ACCS1be1.txt')">CCS1be1</option> 
      <option value="CCS1beadm1" onclick="populate('log1','cng1wlsbe1bCCS1beadm1.txt')">CCS1beadm1</option> 
      <option value="engine_A" onclick="populate('log1','cng1wlsbe1bengine_A.txt')">engine_A</option> 
     </select> 
    </form> 
    <textarea rows="10" id="myTextarea" name="comment" form="log1" style="width:100%"></textarea> 
</div> 

Я только что узнал кодирования и я брал в биты и куски кодов отовсюду, так что я совершенно уверен, что это завалено ошибками. Может ли кто-нибудь из Самаритян просветить меня?

Спасибо!

• Robin :)

Answer 1

У меня есть достаточно времени, чтобы по крайней мере получить вас на пути с некоторыми очень проницательными вещи, которые поставят газ в аквариуме и через пустыню.

• Используйте XHTML5 (имена файлов, заканчивающиеся на .xhtml, пока вы не научитесь работать с кодом сервера). HTML разбирается (просматривается и обрабатывается с помощью) парсером HTML, который сродни армейскому набору 4channers только не будет lulz. XHTML визуализируется синтаксическим анализатором XML, он строгий и в то же время не совершенный, он будет (при использовании Firefox) рассказать вам, когда вы перезагружаете страницу, какая ошибка, а также какая строка и столбец находится по адресу , поэтому вы можете исправить проблему сейчас вместо проблемы с lulz-wat?
• В JavaScript, если у вас есть массив (более чем один элемент содержитс он будет использовать твердые скобки. В примере document.getElementById('example) is singular though if you want to use document.getElementsByTagName ('а )[0] он будет использовать [0] для первого появления, [1] за секунду, [2] для третий и т. д. (без кавычек).
• Используйте двойные кавычки для (X) HTML <element attribute="values" /> и одинарные кавычки для синтаксиса JavaScript, это сэкономит вам лот из-за хлопот в будущем. Также не против пробелов, если вы хорошо кодируете, вы будете использовать минимальные пробелы и только когда-либо иметь более одного места в строке (или более) в JavaScript и на своем сервере (так называемом back-end) коде. HTML: text/html, тогда как XHTML - только XHTML, если он обслуживается application/xhtml+xml; какая версия (X) HTML не имеет ничего общего с типом/типом мультимедиа.
• В случае сомнений проверьте MDN (Mozilla Developer Network). Просто добавьте mdn к вашим поисковым запросам. https://developer.mozilla.org/en/docs/Web/API/FileReader Использование рамки, если вы хотите быть компетентным, большинство людей не могут выполнять действительный реальный код, и чем больше зависимостей вы добавляете, тем слабее становится ваш код, и чем проще обновление чего-либо, третья сторона сломает все. .. в день вашей свадьбы.
• Используйте WinMerge для сравнения старого кода с новым кодом, это бесплатное программное обеспечение, и я никогда не прекращал его использовать.
• При попытке отладки любого кода JavaScript использовать инструменты разработчика (в частности, console). Имейте в виду, что не все ошибки будут выдавать выходные данные, беззвучные ошибки сосут, и, надеюсь, вам не придется иметь дело с молчаливыми ошибками на некоторое время.
• Сохранить этот код с помощью Notepad ++ и обеспечить его кодирование в UTF-8 без (метки порядке байт) BOM, который необходим только для UTF-16 (вы не будете использовать, что если вы не исключительно местный в Индию, я думаю, что это так). Существует не идеальный редактор, хотя для бесплатного программного обеспечения, когда вы привыкнете к нему, вы найдете его достаточно способным и не сосать 4 ГБ ОЗУ, очень респектабельный баланс.

Я очистил код в целом и сделал базовое приложение. Я никогда не работал с локальными текстовыми файлами ... Я знаю, что пользователь должен будет инициировать запрос клиенту (при тестировании вашего компьютера и клиент и сервер). У пользователя есть, чтобы использовать элемент ввода файла для выбора файлов , прежде чем что-нибудь может случиться.

Это довольно продвинутая тема для вас, чтобы взять на себя сначала, хотя с достаточным упорством вы сможете ее победить.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>Sample XHTML5 Application</title> 
<script defer="defer" type="application/javascript"> 
//<![CDATA[ 
function populate(filename) 
{ 
var file = document.getElementById('log1').files[0]; 
var reader = new FileReader(); 
reader.onload = function(e) 
{ 
    document.getElementById('myTextarea').value = e.target.result; 
}; 
reader.readAsText(file); 
} 
//]]> 
</script> 
<style type="text/css"> 

</style> 
</head> 

<body> 

<form id="log1"> 
<fieldset> 
<p>Select File from cng1wlsbe1b:</p> 

<input onclick="populate(document.getElementById('file1').value);" type="button" value="clicky clicky" /> 
<input id="file_upload" type="file" value="" /> 

<select id="file1" name="file1"> 
<option value="CCS1be1" onclick="populate('log1','ACCS1be1.txt')">CCS1be1</option> 
<option value="CCS1beadm1" onclick="populate('log1','cng1wlsbe1bCCS1beadm1.txt')">CCS1beadm1</option> 
<option value="engine_A" onclick="populate('log1','cng1wlsbe1bengine_A.txt')">engine_A</option> 
</select> 

<textarea rows="10" id="myTextarea" name="comment" form="log1" style="width:100%"></textarea> 
</fieldset> 
</form> 

</body> 
</html> 

Это не будет напрямую ответить на ваш вопрос, хотя это поможет вам получить пару лет мимо проблем, вы сталкиваетесь самостоятельно и поставить вас в досягаемости цели. Удачи!