Блог

Главная - Вопросы по программированию - Почему filereader не работает?

Почему filereader не работает?

#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 .. надеюсь, это вам поможет.

Метки: