html5 – Chrome FileReader

前端之家收集整理的这篇文章主要介绍了html5 – Chrome FileReader前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有人可以给我一个使用FileReader API的例子来获取chrome中的文件内容吗?

似乎对我来说没有定义。

<!doctype html>
<html>
<script>
function handle_files(files) {
  console.log(files)
  reader = new FileReader()
  ret = []
  for (i = 0; i < files.length; i++) {
    file = files[i]
    console.log(file)
    text = reader.readAsText(file) //readAsdataURL
    console.log(text) //undefined
    ret.push(text)
  }
  console.log(ret) // [undefined]

}
</script>
<body>
FileReader Test
<input type="file" onchange="handle_files(this.files)">
</body>
</html>

解决方法

我的问题是我假设FileReader是同步的。
这是正确的方法
如果您使用的是Chrome,则此代码必须在服务器(本地主机或站点上)上运行。它不会与本地文件一起使用。
<!doctype html>
<html>
<script>
function handle_files(files) {
  for (i = 0; i < files.length; i++) {
    file = files[i]
    console.log(file)
    var reader = new FileReader()
    ret = []
    reader.onload = function(e) {
      console.log(e.target.result)
    }
    reader.onerror = function(stuff) {
      console.log("error",stuff)
      console.log (stuff.getMessage())
    }
    reader.readAsText(file) //readAsdataURL
  }

}
</script>
<body>
FileReader that works!
<input type="file" multiple onchange="handle_files(this.files)">
</body>
</html>

猜你在找的HTML5相关文章