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

Question

У меня есть приложение для чата, созданное с помощью socket.io и node.js. У меня есть функция ниже для чтения файла со входа и отправки его на сервер в виде строки base64.

function readURL() { 
    if (this.files && 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"> 

Однако при загрузке файла, ничего не происходит. Ошибок не записывается, и на консоль ничего не записывается. Почему это так?

Answer 1

Если код, который вы показали все, что есть, то это будет исправить это

Вы должны передать ссылку из onchange методов ввода, вот делается с помощью this, а затем добавить параметр функции, здесь сделано с использованием el

Примечание: this является действительным оператором javascript, в исходном фрагменте кода ошибки не будет.

Вы можете прочитать больше о this здесь: JavaScript/Reference/Operators/this

function readURL(el) { 
 
    if (el.files && 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">

Answer 2

Вы обращаетесь выбранный файл в неправильном объекте. Если у вас есть ниже HTML

<input id="file" type='file' onchange="readURL()"/> 

затем, чтобы получить объект файла в методе "readURL", попробуйте следующее:

var file = (((this.file || {}).files || [])[0]); 

@Hundotte .. надеюсь, что это поможет.