#javascript #html #node.js #socket.io #filereader
#javascript #HTML #node.js #socket.io #filereader
Вопрос:
У меня есть приложение для чата, созданное с помощью сокета.ввод-вывод и node.js . Ниже у меня есть функция для чтения файла из входных данных и отправки его на сервер в виде строки base64.
function readURL() {
if (this.files amp;amp; this.files[0]) {
var FR= new FileReader();
FR.onload = function(e) {
$("img").attr("src", e.target.result);
socket.emit('image', e.target.result);
console.log(e.target.result);
};
FR.readAsDataURL( this.files[0] );
}
};
Мой HTML выглядит следующим образом:
<input id="file" type='file' onchange="readURL()"/>
<img id="img">
Однако при загрузке файла ничего не происходит. Ошибки не записываются, и ничего даже не регистрируется в консоли. Почему это так?
Комментарии:
1. Как вы слушаете свой сокет в NodeJS?
2. Это может произойти потому
this.files
, что внутри области действия функции нет.
Ответ №1:
Если код, который вы показали, — это все, что есть, то это исправит это
Вам нужно передать ссылку из метода ввода onchange
, здесь сделано с помощью this
, а затем добавить параметр в функцию, здесь сделано с помощью el
Обратите внимание, что, поскольку this
это допустимый оператор javascript, в вашем исходном фрагменте кода ошибка не будет сгенерирована.
Вы можете прочитать больше об this
этом здесь: JavaScript/Reference /Operators/this
function readURL(el) {
if (el.files amp;amp; el.files[0]) {
var FR= new FileReader();
FR.onload = function(e) {
$("img").attr("src", e.target.result);
socket.emit('image', e.target.result);
console.log(e.target.result);
};
FR.readAsDataURL( el.files[0] );
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="file" type='file' onchange="readURL(this)"/>
<img id="img">
Комментарии:
1. Спасибо! Это сработало хорошо. Однако перед загрузкой файла в нем говорится, что Uncaught TypeError: Не удается прочитать свойство ‘files’ undefined . Это не позволяет приложению запускать node.js команды до тех пор, пока изображение не будет загружено.
Ответ №2:
Вы обращаетесь к выбранному файлу в неправильном объекте. Если у вас есть ниже html
<input id="file" type='file' onchange="readURL()"/>
затем, чтобы получить объект file в методе «readURL», попробуйте следующее:
var file = (((this.file || {}).files || [])[0]);
@Hundotte .. надеюсь, это вам поможет.