Datei von Server herunterladen

S

Shibb

New member
Hi.

Ich habe versucht folgendes Bsp. auszuführen leider erscheint nicht wie zu erwarten ein Bild.

Code: 
<html>
 <head> 
	<script type="text/javascript" src="dist/jquery-2.1.1.min.js"></script> 
 
 </head> 
	<body>

	<img src="http://www.codeproject.com/KB/ajax/BackboneOfAjax/flow.jpg" height="200" alt="Image preview...">

</body> 
 <script type="text/javascript"> 
	 
	window.URL = window.URL || window.webkitURL;  // Take care of vendor prefixes.

	var xhr = new XMLHttpRequest();
	xhr.open('GET', "http://www.codeproject.com/KB/ajax/BackboneOfAjax/flow.jpg", true);
	xhr.responseType = 'blob';

	xhr.onload = function(e) {
		if (this.status == 200) {
		var blob = this.response;

		var img = document.createElement('img');
		img.onload = function(e) {
			window.URL.revokeObjectURL(img.src); // Clean up after yourself.
		};
		img.src = window.URL.createObjectURL(blob);
		document.body.appendChild(img);
  }
};

xhr.send();
	
</script> 
</html>

Mein eigentliches Ziel ist es due heruntergeladene Datei an ein das JSZip Objekt zu übergeben.
Code: 
...
<script type="text/javascript" src="dist/jszip.js"></script> 
...
 var zip = new JSZip();
zip.file("datei", xhr.response);
 
Shibb schrieb:
Code: 
</body> 
 <script type="text/javascript">
Zum Vergrößern anklicken....

Hat es einen bestimmten Grund, warum das Script nach geschlossenem
Code: 
</body>
eingebunden wird?

Außerdem kannst du nicht ohne weiteres etwas von einer anderen Domain runterladen.

Mit CORS können Webanwendungen in einer Domain übergreifende AJAX-Anforderungen an eine andere Domain stellen. Das lässt sich sehr leicht aktivieren und erfordert nur, dass der Server einen einzelnen Antwort-Header sendet.

CORS-Anforderungen aktivieren

Nehmen wir einmal an, dass sich Ihre Anwendung auf example.com befindet und dass Sie Daten von example2.com abrufen möchten. Wenn Sie für gewöhnlich diese Art AJAX-Abrufe vornehmen, würde die Anforderung fehlschlagen. Der Browser gäbe einen Fehler in Bezug auf die fehlende Ursprungsübereinstimmung aus. Mit CORS kann example2.com Anforderungen von example.com zulassen, indem ganz einfach ein Header hinzugefügt wird:

Access-Control-Allow-Origin: Example Domain
Zum Vergrößern anklicken....
Quelle: Neue Tricks für XMLHttpRequest2 - HTML5 Rocks
 
Zuletzt bearbeitet:
Du meinst die Stelle xhr.onload? Ich nahm an die wird zu einer bestimmten Zeit automatisch aufgerufen. Wenn ich
Code: 
	if (xhr.status == 200) {
		var blob = xhr.response;

		var img = document.createElement('img');
		img.onload = function(e) {
			window.URL.revokeObjectURL(img.src); // Clean up after yourself.
		};
		img.src = window.URL.createObjectURL(blob);
		document.body.appendChild(img);
  }

aus der Funktion rausnehme funktioniert es auch nicht.
 
Julian schrieb:
Zeig doch mal, was du bisher probiert hast.
Und wie gesagt findest du hier ebenfalls ein wunderbares Beispiel...
Zum Vergrößern anklicken....

folgendes habe ich versucht:

Code: 
<html>
 <head> 
	<script type="text/javascript" src="dist/jquery-2.1.1.min.js"></script> 

 </head> 
	<body>

	<img src="http://www.html5rocks.com/de/tutorials/file/xhr2/access_control_header.png" height="200" alt="Image preview...">
	<script type="text/javascript"> 
	 
	window.URL = window.URL || window.webkitURL;  // Take care of vendor prefixes.

	var xhr = new XMLHttpRequest();
	xhr.open('GET', "http://www.html5rocks.com/de/tutorials/file/xhr2/access_control_header.png", true);
	xhr.responseType = 'blob';

	xhr.onload = function(e) {
		if (this.status == 200) {
		var blob = this.response;

		var img = document.createElement('img');
		img.onload = function(e) {
			window.URL.revokeObjectURL(img.src); // Clean up after yourself.
		};
		img.src = window.URL.createObjectURL(blob);
		document.body.appendChild(img);
  }
};

xhr.send();
	
 
</script> 
</body> 
 
</html>
 
Du solltest beim Entwickeln immer(!) die Fehlerkonsole benutzen!
59790-datei-server-herunterladen.png

Am Besten, du probierst das auf deinem eigenen Server aus - vermutlich gibt es auch bei html5rocks Beschränkungen...
 
Zuletzt bearbeitet:
Warum sollte html5rocks auch seine Bilder mit eine CORS-Header raussenden?

@Shibb: aber lad' doch mit dem XHR einfach irgend ein anderen Bild von dem Server, auf dem du das JS testest...

PS: Ich verstehe immer noch nicht, warum du die ZIP-Datei im Client zusammenbauen willst. Auf dem Server ist das viel einfacher, stabiler, schneller.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben