为什么filereader不工作？

我有一个使用socket.io和node.js构build的聊天应用程序。 我有一个函数如下从input读取文件并将其作为base64string发送到服务器。

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"> 

然而，在上传文件时，没有任何反应。 没有logging错误，甚至没有logging到控制台。 这是为什么？

Answer 1

如果你显示的代码是全部的，那么这将修复它

你需要从input的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 ..希望它会帮助你。