HTML5 et Javascript : Ouverture et la Lecture d'un Fichier Local avec un Fichier API

Au lieu d'utiliser window, vous devriez toujours utiliser $wnd. Voir https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsJSNI#writing pour plus de détails sur JSNI.

Il pourrait également être intéressant d'ajouter un debugger déclaration tout en utilisant quelque chose comme Firebug ou Chrome, de l'Inspecteur. Cette déclaration va arrêter le code JS dans le débogueur comme si vous aviez mis un point d'arrêt, sont vous permettre de déboguer en Javascript, pas à pas, ligne par ligne pour voir exactement ce qui s'est passé.

Et enfin, êtes-vous sûr que le fichier que vous lisez est autorisée par le navigateur? De http://dev.w3.org/2006/webapi/FileAPI/#dfn-SecurityError, cette erreur peut se produire parce que le navigateur n'a pas été autorisé à accéder au fichier. Au lieu de passer dans la Chaîne, vous pouvez passer dans le <input type='file' /> l'utilisateur interagit avec, et obtenir le fichier sélectionné à partir de là.

---

Mise à jour (désolé pour le retard, apparemment la mise à jour antérieure j'ai fait suis jeté à l'écart, m'a pris un peu de le réécrire):

Quelques mauvaises hypothèses soient formulées dans le code d'origine. La plupart de mes lectures est de http://www.html5rocks.com/en/tutorials/file/dndfiles/, en plus d'un peu d'expérimentation.

• Tout d'abord, que vous pouvez obtenir un réel chemin de la <input type='file' /> champ, couplé avec
• que vous pouvez lire des fichiers arbitraires de l'utilisateur du système de fichiers juste en chemin, et enfin
• que le FileReader API est synchrone.

Pour des raisons de sécurité, la plupart des navigateurs ne donnent pas de véritables parcours quand vous lisez le nom du fichier - vérifier la chaîne que vous obtenez à partir upload.getFilename() dans plusieurs navigateurs pour voir ce que ça donne, pas assez pour charger le fichier. La deuxième question est également de sécurité, chose que très peu de bon ne peut venir de permettre la lecture à partir du système de fichiers en utilisant simplement une chaîne pour spécifier le fichier à lire.

Pour ces deux premières raisons, vous devez demander à la input pour les fichiers c'est de travailler. Les navigateurs qui prennent en charge les FileReader API permettent d'accéder à cette par la lecture de la files propriété de l'élément d'entrée. Deux façons simples pour obtenir ce travail avec la NativeElement.getEventTarget() dans jsni, ou simplement de travailler avec FileUpload.getElement(). Gardez à l'esprit que ce files propriété contient plusieurs éléments par défaut, de sorte que dans un cas comme le vôtre, il suffit de lire le zéro de l'élément.

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

ou

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

Pour le dernier morceau, le FileReader api asynchrone - vous n'obtenez pas le contenu complet du fichier immédiatement, mais besoin d'attendre jusqu'à ce que le onloadend callback n'est appelé (encore une fois, de http://www.html5rocks.com/en/tutorials/file/dndfiles/). Ces fichiers peuvent être assez grand pour que vous ne voudriez pas que l'application de bloquer pendant qu'il lit, donc, apparemment, la spec assume ce que la valeur par défaut.

C'est pourquoi j'ai fini par faire une nouvelle void loadContents méthodes, au lieu de garder le code dans votre onClick de la méthode cette méthode est appelée lorsque le champ est ChangeEvent s'en va, pour commencer à le lire dans le fichier, bien que cela puisse être écrit d'une autre façon.

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

Le bouton 'Ok' puis se lit dans les champs. Il serait probablement plus sage de vérifier que le contenu est non null dans le ClickHandler, et peut-être même nulle quand la FileUpload's ChangeEvent s'éteint.