HTML5 -> File Api funktioniert in Chrome nicht, aber in Firefox
timt
- html
0 ChrisB0 tim
0 Der Martin0 molily0 tim0 Der Martin
1 molily
Hallo,
ich habe hier ein einfaches Beispiel geschrieben bzw. mir zusammengesucht. Dieser Code hat folgende Funktion: Man zieht eine Bild aus dem Dateibrowser direkt in den Browser auf das rote feld und die Datei wird dann als Hintergrund von dem Feld eingefügt.
In Firefox funktioniert der Code auch einwandfrei, und Chrome sollte das normal auch unterstützen.
Sieht jemand einen Fehler?
<html>
<body>
<div id="holder" style="width:100px;height:100px;background:red"></div>
<script type="text/javascript">
[code lang=javascript]
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
holder.style.background = 'url(' + event.target.result + ') no-repeat center';
};
reader.readAsDataURL(file);
return false;
}
</script>
</body>
</html>[/code]
Viele Grüße
tim
Hi,
Sieht jemand einen Fehler?
Was hast *du* beim Debugging denn bisher herausgefunden?
MfG ChrisB
Hallo,
bisher leider nicht viel.. nur, dass die die reader.onload - funktion niemals aufgerufen wird. Aber ich kann mir nicht erklären warum es im Firefox funktioniert und in Chrome nicht...
Viele Grüße
tim
Hi,
Sieht jemand einen Fehler?
Was hast *du* beim Debugging denn bisher herausgefunden?
MfG ChrisB
Hi,
In Firefox funktioniert der Code auch einwandfrei
das würde mich doch sehr wundern - solches Kaffeesatzlesen bin ich sonst nur vom IE gewöhnt.
und Chrome sollte das normal auch unterstützen.
Okay, da fehlt mir jegliche Erfahrung.
<html>
<body>
<div id="holder" style="width:100px;height:100px;background:red"></div>
<script type="text/javascript">
holder.ondragover = function () { this.className = 'hover'; return false; };
Wo kommt deiner Meinung nach plötzlich die globale Javascript-Variable holder her? Fällt die vom Himmel?
Eigentlich ist es eine Unart des IE, allein aufgrund der Existenz eines HTML-Elements mit einer bestimmten ID ein gleichnamiges Javascript-Objekt im globalen Scope anzulegen.
Die von dir verwendeten Eventhandler sind mir auch eher unbekannt, aber das mag meiner allgemeinen Ablehnung gegenüber Javascript geschuldet sein.
So long,
Martin
Wo kommt deiner Meinung nach plötzlich die globale Javascript-Variable holder her? Fällt die vom Himmel?
Tim hat den Code fehlerhaft von http://html5demos.com/file-api kopiert. In jenem steht noch
var holder = document.getElementById('holder'), …
Eigentlich ist es eine Unart des IE, allein aufgrund der Existenz eines HTML-Elements mit einer bestimmten ID ein gleichnamiges Javascript-Objekt im globalen Scope anzulegen.
Das unterstützen im Übrigen alle Browser und es ist auch standardisiert. Den ersten Stein hat hier (hinsichtlich name-Attributen) nicht der IE geworfen, sondern Netscape 2 oder 3.
Mathias
Hm aber auf der Seite http://html5demos.com/file-api funktioniert es auch mit Chrome, wird da ne zusätzlich bib verwendet oder so?
tim
Wo kommt deiner Meinung nach plötzlich die globale Javascript-Variable holder her? Fällt die vom Himmel?
Tim hat den Code fehlerhaft von http://html5demos.com/file-api kopiert. In jenem steht noch
var holder = document.getElementById('holder'), …
Eigentlich ist es eine Unart des IE, allein aufgrund der Existenz eines HTML-Elements mit einer bestimmten ID ein gleichnamiges Javascript-Objekt im globalen Scope anzulegen.
Das unterstützen im Übrigen alle Browser und es ist auch standardisiert. Den ersten Stein hat hier (hinsichtlich name-Attributen) nicht der IE geworfen, sondern Netscape 2 oder 3.
Mathias
Hallo,
Das unterstützen im Übrigen alle Browser und es ist auch standardisiert.
ah, seit heute. Okay. Auch wenn ich HTML 5 eher boykottiere.
Den ersten Stein hat hier (hinsichtlich name-Attributen) nicht der IE geworfen, sondern Netscape 2 oder 3.
Egal. Das sind beides Initiativen, die man besser ignoriert.
So long,
Martin
Chrome unterstützt das nicht lokal. Also keine Chance im file-Umfeld, dafür geht es im http-Umfeld.
Wie du auch sehen kannst:
reader.onerror = function (e) {
console.log(e.type, reader.error);
};
Gibt dir einen Fehler vom Typ SECURITY_ERR aus.
Mathias
Achso, das heißt, wenn ich die html-Seite direkt auf meinem Rechner habe funktioniert das nicht, aber wenn die Seite auf einem Server liegen würde dann funktioniert es?
Chrome unterstützt das nicht lokal. Also keine Chance im file-Umfeld, dafür geht es im http-Umfeld.
Wie du auch sehen kannst:
reader.onerror = function (e) {
console.log(e.type, reader.error);
};
>
> Gibt dir einen Fehler vom Typ [SECURITY_ERR](http://dev.w3.org/2006/webapi/FileAPI/#dfn-SECURITY_ERR) aus.
>
> Mathias
Achso, das heißt, wenn ich die html-Seite direkt auf meinem Rechner habe funktioniert das nicht, aber wenn die Seite auf einem Server liegen würde dann funktioniert es?
Genau.
Mathias