28

有人可以给我一个使用 FileReader API 去获取 chrome 中文件内容的例子吗？

它似乎undefined为我回来了。

<!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>
4

2 回答 2

36

我的问题是我认为 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>
于 2010-11-04T20:52:49.013 回答
18

File API FileReader 对象在 Chrome 中的运行方式与在 FireFox、Opera 或 Internet Explorer 10 中的运行方式相同（是的，在 IE 中运行）。

简单示例

您首先声明一个新的阅读器实例：

var reader = new FileReader();

为它的各种事件定义你的回调：

reader.onloadend = function(){
    document.body.style.backgroundImage = "url(" + this.result + ")";
}

然后将其传递给阅读：

reader.readAsDataURL(file);

小提琴：http: //jsfiddle.net/jonathansampson/K3A9r/

处理多个文件

当您处理多个文件时，情况会有所不同。虽然很明显我们需要循环遍历生成的 FileList，但我们还需要使用闭包来防止文件数据在多次迭代中被篡改：

    // Continue only if we have proper support
    if ( window.FileReader ) {

      // Provide our logic upon the change even of our input
      document.getElementById("collection").onchange = function(){

        // Couple variables for handling each file
        var counter = -1, file;

        // Cycle over all files
        while ( file = this.files[ ++counter ] ) {

          // Create a reader for this particular file
          var reader = new FileReader();

          // Respond to the onloadend event of the reader
          reader.onloadend = (function(file){
            return function(){
              var image = new Image();
              image.height = 100;
              image.title = file.name;
              image.src = /^image/.test(file.type) ? this.result : "t9QlH.png";
              document.body.appendChild( image );
            }
          })(file);

          // Begin reading data for this file
          reader.readAsDataURL( file );
        }
      }
    }​

小提琴：http: //jsfiddle.net/jonathansampson/jPTV3/

特征检测

尽管几乎所有现代浏览器都可以使用 FileReader，但您仍然需要确保不会对使用旧浏览器的用户造成任何骚动。在使用 FileReader 之前，请务必检查窗口对象是否存在：

if ( window.FileReader ) {
    // Safe to use FileReader
}

在本地运行，从 Chrome

我应该注意，在 Chrome 的 file:/// 路径中运行它会导致体验失败。默认情况下，当前版本的 Chrome 不允许 file:/// 页面访问其他文件。--allow-file-access-from-files您可以使用标志更改此行为加载 Chrome 。

在此处输入图像描述

请注意，此方法仅允许对打开它的浏览器实例上的文件进行文件访问。如果您希望将来所有浏览器实例都是这种情况，您可以从桌面修改快捷方式。只需右键单击 Chrome 快捷方式，然后转到属性。接下来，将标志添加到目标的末尾。

于 2012-06-14T00:02:05.293 回答