为什么文件阅读器不工作？

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[=18= 完成]

请注意，由于 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 ..希望对你有帮助。

为什么文件阅读器不工作？

Why is filereader not working?

html

javascript

filereader

node.js

socket.io