nicht angemeldet
HTML5 -> File Api funktioniert in Chrome nicht, aber in Firefox
0 0 
Der Martin
0 0 0 Der Martin
1
HTML5 -> File Api funktioniert in Chrome nicht, aber in Firefox
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
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
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
timHi,
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--
Der Bäcker schlägt die Fliegen tot
Und macht daraus Rosinenbrot.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
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--
Rizinus hat sich angeblich als sehr gutes Mittel gegen Husten bewährt.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
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
-
-