javascript - 将 Meteor 与 FileReader 一起使用，读取文件时出错

Question

我是 Meteor 的新手。我想访问客户端的本地 .csv 文件。我使用了 FileReader 方法，但代码总是以错误退出。下面是代码。

html文件

<template name="filePage">
<div>
<form id="form">
            <label>File: </label>
            <input type="file" id="file" name="filename" size="50"/><br/>
            <br/>
            <input type="submit" id="submit" value="Upload Now"/>
</form>
</div>
</template>

客户端.js文件

Template.filePage.events({

    'submit form': function () { 
        var file = document.getElementById("file").files[0];
        var reader = new FileReader();

        reader.onload = function() {
            alert("load succeeded");
          };
        reader.onerror = function(event){    
            alert(event.target.error.code); //I got error code 4 here. 
        }
        reader.readAsText(file);
    },
});

附言。我试图用嵌入式 javascript 编写一个 html 文件。然后“FileReader”工作正常。我想问题不在于我的浏览器或我的操作系统。我试图将“FileReader”javascript 放在服务器端方法中，然后从客户端调用该方法。但是 referenceError 是 thrower 表示“未定义 FileReader”。

我真的想不通为什么会出现这个问题？？还有其他方法可以实现我的目标吗？

Answer 1

• 您忘记传递事件和模板 (e,t)
• 您可能希望停止表单提交的传播以避免重新加载页面e.stopPropagation()
e.preventDefault()
• 您想使用已解析的模板t 读取元素t.find('#file')
• 您想使用error 来捕获错误。

---

Template.filePage.events({
  'submit form': function (e,t) {
    e.stopPropagation();
    e.preventDefault();

    var file = t.find('#file').files[0];
    var reader = new FileReader();

    reader.onload = function() {
      alert("load succeeded");
    };
    reader.onerror = function(error){    
      alert(error);
    }
    reader.readAsText(file);
  }
});