Chrome 文件阅读器

发布于 2024-10-01 04:40:58 字数 627 浏览 7 评论 0原文

有人可以给我一个使用 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>

原文

Can someone give me an example of using the FileReader API go get contents of a file in chrome?

It seems to be returning undefined for me.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无风消散 2024-10-08 04:40:58

我的问题是我认为 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>

My problem was that I assumed FileReader was sychronous.
Here is the right way to do it.
If you are on chrome, this code has to be running on a server (localhost or on a site). It won't work with a local file.

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

回复收藏 0 原文

蓝礼 2024-10-08 04:40:58

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);

Fiddle: 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 );
        }
      }
    }

Fiddle: http://jsfiddle.net/jonathansampson/jPTV3/

功能检测

尽管 FileReader 在几乎所有现代浏览器中都可用，但您仍然希望确保不会导致任何问题使用旧浏览器的用户会感到不安。在使用 FileReader 之前，请务必检查窗口对象是否存在：

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

从 Chrome 本地运行

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

在此处输入图像描述

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

The File API FileReader object operates the same way in Chrome as it does in FireFox, Opera, or Internet Explorer 10 (Yup, works in IE).

Simple Example

You start by declaring a new instance of the reader:

var reader = new FileReader();

Define your callbacks for its various events:

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

And then pass it something to read:

reader.readAsDataURL(file);

Fiddle: http://jsfiddle.net/jonathansampson/K3A9r/

Handling Multiple Files

When you're working with multiple files, things are a bit different. While it's clear we need to cycle over the resulting FileList, we'll also need to use a closure to prevent file data from getting tampered with over numerous iterations:

    // 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 );
        }
      }
    }

Fiddle: http://jsfiddle.net/jonathansampson/jPTV3/

Feature Detection

Although FileReader is available in nearly all modern browsers, you still want to be sure you don't cause any ruckus for users on older browsers. Prior to using the FileReader, be sure to check the window object for its presence:

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

Running Locally, From Chrome

I should note that running this in a file:/// path in Chrome will result in a broken experience. By default, current versions of Chrome don't permit file:/// pages to access other files. You can change this behavior loading Chrome with the --allow-file-access-from-files flag.

enter image description here

Note, this method will only permit file access for files on the instance of the browser it was opened with. If you want this to be the case for all browser instances into the future, you could modify the shortcut from your desktop. Simply right-click the Chrome shortcut, and go to properties. Next, add the flag to the end of the target.

回复收藏 0 原文

~没有更多了~