javascript - HTML5 和 Javascript : Opening and Reading a Local File with File API

Question

我正在为一个项目使用 Google Web Toolkit，并希望用户选择一个文本文件以在浏览器内的文本窗口中打开。这是几乎可以工作的代码:

 private DialogBox createUploadBox() {
     final DialogBox uploadBox = new DialogBox();
     VerticalPanel vpanel = new VerticalPanel();
     String title = "Select a .gms file to open:";
     final FileUpload upload = new FileUpload();
     uploadBox.setText(title);
     uploadBox.setWidget(vpanel);
     HorizontalPanel buttons = new HorizontalPanel();
     HorizontalPanel errorPane = new HorizontalPanel();
     Button openButton = new Button( "Open", new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            String filename = upload.getFilename();
            int len = filename.length();
            if (len < 5) {
                Window.alert("Please enter a valid filename.\n\tFormat: <filename>.gms");
            } else if (!filename.substring(len-4).toLowerCase().equals(".gms")) {
                Window.alert(filename.substring(len-4) + " is not valid.\n\tOnly files of type .gms are allowed.");
            } else {
                Window.alert(getFileText(filename));
            }
        }
        private native String getFileText(String filename) /*-{
            // Check for the various File API support.
            if (window.File && window.FileReader && window.FileList && window.Blob) {
                // Great success! All the File APIs are supported.
                var reader = new FileReader();
                var file = File(filename);
                str = reader.readAsText(file);
                return str;
            } else {
                alert('The File APIs are not fully supported in this browser.');
                return;
            }
        }-*/;
     });
     Button cancelButton = new Button( "Cancel", 
             new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            uploadBox.hide();               
        }
     });
     buttons.add(openButton);
     buttons.add(cancelButton);
     vpanel.add(upload);
     vpanel.add(buttons);
     vpanel.add(errorPane);
     uploadBox.setAnimationEnabled(true);
     uploadBox.setGlassEnabled(true);
     uploadBox.center();
     return uploadBox;
 }

每当我尝试在我的程序中实际使用这个函数时，我得到:

(NS_ERROR_DOM_SECURITY_ERR):安全错误

我确定它是由:

var file = new File(filename, null);

免责声明:我无论如何都不是 Javascript 程序员，请随时指出我在这里犯的任何明显错误。

Answer 1

而不是使用 window , 你应该几乎总是使用 $wnd .参见 https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsJSNI#writing有关 JSNI 的更多详细信息。

添加 debugger 也是值得的在使用诸如 Firebug 或 Chrome 的检查器之类的东西时声明。此语句将停止调试器中的 JS 代码，就好像您已将断点放在那里一样，允许您在 Javascript 中进行调试，一次单步执行一行以查看到底出了什么问题。

最后，您确定浏览器允许您正在阅读的文件吗？来自 http://dev.w3.org/2006/webapi/FileAPI/#dfn-SecurityError ，可能会发生该错误，因为浏览器未被允许访问该文件。您可以传入 <input type='file' /> 而不是传入字符串用户正在与之交互，并从那里获取他们选择的文件。

---

更新(很抱歉延迟，显然我之前做的更新被扔掉了，我花了点时间重写):

在原始代码中做出了一些错误的假设。我的大部分阅读来自 http://www.html5rocks.com/en/tutorials/file/dndfiles/ ，加上一些试验。

• 首先，您可以从 <input type='file' /> 获得一条真实路径领域，再加上
• 你可以通过路径从用户文件系统中读取任意文件，最后
• FileReader API 是同步的。

出于安全原因，大多数浏览器在您读取文件名时不会提供真实路径 - 检查您从 upload.getFilename() 获得的字符串在几个浏览器中查看它提供的内容 - 不足以加载文件。第二个问题也是一个安全问题 - 允许仅使用字符串指定要读取的文件来从文件系统读取几乎没有什么好处。

由于前两个原因，您需要询问 input对于它正在处理的文件。支持 FileReader API 的浏览器允许通过读取 files 来访问它输入元素的属性。有两种简单的方法可以做到这一点——使用 jsni 中的 NativeElement.getEventTarget()，或者只使用 FileUpload.getElement()。请记住，这 files属性默认包含多个项目，因此在像您这样的情况下，只需读取第零个元素即可。

private native void loadContents(NativeEvent evt) /*-{
    if ($wnd.File && $wnd.FileReader && $wnd.FileList && $wnd.Blob) {
        // Great success! All the File APIs are supported.
        var reader = new FileReader();
        reader.readAsText(evt.target.files[0]);
//...

或

private native void loadContents(Element elt) /*-{
    if ($wnd.File && $wnd.FileReader && $wnd.FileList && $wnd.Blob) {
        // Great success! All the File APIs are supported.
        var reader = new FileReader();
        reader.readAsText(elt.files[0]);
//...

对于最后一 block ，FileReader api 是异步的 - 您不会立即获得文件的全部内容，但需要等到 onloadend调用回调(同样来自 http://www.html5rocks.com/en/tutorials/file/dndfiles/ )。这些文件可能足够大，以至于您不希望应用程序在读取时被阻塞，因此显然规范假定这是默认设置。

这就是为什么我最终制作了一个新的 void loadContents方法，而不是将代码保留在您的 onClick 中方法 - 当字段的 ChangeEvent 时调用此方法熄灭，开始读取文件，尽管这可以用其他方式编写。

// fields to hold current state
private String fileName;
private String contents;
public void setContents(String contents) {
  this.contents = contents;
}

// helper method to read contents asynchronously 
private native void loadContents(NativeEvent evt) /*-{;
    if ($wnd.File && $wnd.FileReader && $wnd.FileList && $wnd.Blob) {
        var that = this;
        // Great success! All the File APIs are supported.
        var reader = new FileReader();
        reader.readAsText(evt.target.files[0]);
        reader.onloadend = function(event) {
            that.@com.sencha.gxt.examples.test.client.Test::setContents(Ljava/lang/String;)(event.target.result);
        };
    } else {
        $wnd.alert('The File APIs are not fully supported in this browser.');
    }
}-*/;

// original createUploadBox
private DialogBox createUploadBox() {
  final DialogBox uploadBox = new DialogBox();
  VerticalPanel vpanel = new VerticalPanel();
  String title = "Select a .gms file to open:";
  final FileUpload upload = new FileUpload();
  upload.addChangeHandler(new ChangeHandler() {
    @Override
    public void onChange(ChangeEvent event) {
      loadContents(event.getNativeEvent());
      fileName = upload.getFilename();
    }
  });
  // continue setup

“确定”按钮然后从字段中读取。检查 ClickHandler 中的内容是否为非空可能是明智的。 ，甚至可能在 FileUpload 时将其取消的 ChangeEvent熄灭。