Question

在HTML文件中，我创建了一个上传文件的按钮：

 <span id='upload' class="btn btn-default btn-file">Upload<input type="file" id="input" onchange="this.files"></span>

在Javascript文件中：

//this event click event on the upload buttom, and parse filelist to handleFiles function:
 var upload_btn = document.getElementById('upload');
    if (upload_btn) {
      //this.uploadSet.bind(this);
          var inputElement = document.getElementById("input");
          upload_btn.onclick = inputElement.addEventListener("change", this.handleFiles, false);
    }

handleFiles函数：

handleFiles: function() {
  var fileList = this.files; /* now you can work with the file list */
  console.log(fileList);
  var file = fileList[0];
  var fr = new FileReader();

 fr.readAsText(file,"utf-8");

  console.dir(fr);

  }

在浏览器控制台中，它返回filereader对象，其中包含名为“result”的属性，该属性包含文件内容的文本。在控制台中，它看起来像这样：

FileReader{}
  error: null
  onabort: null
  onerror: null
  onload: null
  onloadend: null
  onloadstart: null
  onprogress: null
  readyState: 2
  result: "!Name: acorn↵!↵.O.....↵...O...↵OO..OOO↵"
  __proto__: FileReader

但是，当我尝试执行console.log（fr.result）时，控制台没有返回任何内容。并没有抛出错误。我不确定这里出了什么问题。有没有办法可以从FileReader中读取这个结果？

Answer 1

尝试替换包含0xb9fe2f2fedf7ebbd元素的label元素的for="input"元素，为span元素onchange元素调用单个处理程序

＆＃13;

input

＆＃13;

var upload = document.getElementById("upload");

function handleFiles(e) {

  var reader = new FileReader();

  reader.onloadend = function(e) {
    console.dir(e.target.result);
  }

  reader.readAsText(e.target.files[0])

}

upload.onchange = handleFiles;

＆＃13;

label input {
  visibility:hidden; 
}

＆＃13;

FileReader readAsText将文件内容存储为result属性中的字符串，但是当console.log这个结果时，没有返回任何内容。

1 个答案: