HTML5 и Javascript: открытие и чтение локального файла с помощью File API

Вместо использования window вы почти всегда должны использовать $wnd. См. https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsJSNI#writing для получения дополнительных сведений о JSNI.

Также может быть полезно добавить оператор debugger при использовании чего-то вроде Firebug или Chrome Inspector. Этот оператор остановит код 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 элемента ввода. Два простых способа получить это — работа с NativeElement.getEventTarget() в jsni или просто работа с 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]);
//...

or

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]);
//...

Наконец, 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) {
            [email protected]::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, и, возможно, даже обнулить его, когда ChangeEvent FileUpload отключается.

Насколько я вижу, вы можете использовать только new File(name) при написании расширений: https://developer.mozilla.org/en/Extensions/Using_the_DOM_File_API_in_chrome_code