Vorschaubild für Upload

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
schachfeld

schachfeld hat kostenlosen Webspace.

14:46, 4.5.2013
Hallihallo,
Ich komme mal wieder mit einer Frage denn ich suche schon einige Zeit im Internet nach einer Lösung, wie ich eine Bild vorschau VOR dem Upload machen kann. Rausgefunden habe ich, dass ich den inhalt von einem file-input mit javascript nicht ermitteln kann also kann ich das Bild mit Javascript auch nicht in den html-Code einfügen oder so etwas in der Richtung.

Gibt es da eine Lösung oder geht das gar nicht?

lg
schachfeld
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
fatfreddy

fatfreddy hat kostenlosen Webspace.

14:53, 4.5.2013
Hier findest Du ein einfaches Beispiel, wie es geht: http://www.webmaster-resource.de/vorschau-beim-upload-von-bilddateien.php

Komfortabler, inklusive Drag&Drop-Support, geht es mit einem JQuery-Plugin: http://blueimp.github.io/jQuery-File-Upload/basic-plus.html
Autor dieses Themas
schachfeld

schachfeld hat kostenlosen Webspace.

15:41, 4.5.2013
Vielen Dank erstmal...
Das jQuery Plugin möchte ich nicht nutzen weil ich jetzt schon alles aufgebaut habe auf der Seite und nicht wieder umbauen möchte.

Die zweite Möglichkeit ist zwar schön und gut beschrieben, sie funktioniert allerdings nicht... :(

Andere Ideen? :)
esadat

esadat hat kostenlosen Webspace.

21:15, 4.5.2013
Hi, hab auch mal den ersten Vorschlag zur Vorschau ausprobiert. Funktioniert bei mir auch nicht, weil javascript keinen Zugriff auf das Dateisystem erhält, sondern stattdessen über ein "Fakepath" bedient wird.

Mich würde auch interessieren, ob man ein Vorschaubild ohne Upload anzeigen kann... Mit jQuery scheint es ja möglich zu sein, obwohl ich da glaube, dass das Bild auf den Server geladen wird...

~~h**s~~

0:31, 5.5.2013

die alten javascript tricks funktionieren tatsächlich nicht mehr...

aber es gibt eine geschmeidige lösung: HTML5 FileAPI

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
	    <style>
		  .thumb {
			height: 75px;
			border: 1px solid #000;
			margin: 10px 5px 0 0;
		  }
		</style>
    </head>
    <body>
		<input type="file" id="files" name="files[]" multiple />
        <output id="list"></output>
        <script>
          function handleFileSelect(evt) {
            var files = evt.target.files; // FileList object
        
            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0, f; f = files[i]; i++) {
        
              // Only process image files.
              if (!f.type.match('image.*')) {
                continue;
              }
        
              var reader = new FileReader();
        
              // Closure to capture the file information.
              reader.onload = (function(theFile) {
                return function(e) {
                  // Render thumbnail.
                  var span = document.createElement('span');
                  span.innerHTML = ['<img class="thumb" src="', e.target.result,
                                    '" title="', escape(theFile.name), '"/>'].join('');
                  document.getElementById('list').insertBefore(span, null);
                };
              })(f);
        
              // Read in the image file as a data URL.
              reader.readAsDataURL(f);
            }
          }
        
          document.getElementById('files').addEventListener('change', handleFileSelect, false);
        </script>
	</body>
</html>

kannst du testen hier: hcms.4lima.at/html5fileapi/

...oder aber noch die vielen anderen coolen möglichkeiten abchecken: http://www.html5rocks.com/de/tutorials/file/dndfiles/

Beitrag zuletzt geändert: 5.5.2013 0:32:07 von hcms

fatfreddy

fatfreddy hat kostenlosen Webspace.

1:22, 5.5.2013

schachfeld schrieb:Die zweite Möglichkeit ist zwar schön und gut beschrieben, sie funktioniert allerdings nicht... :(

esadat schrieb:
Hi, hab auch mal den ersten Vorschlag zur Vorschau ausprobiert. Funktioniert bei mir auch nicht, weil javascript keinen Zugriff auf das Dateisystem erhält, sondern stattdessen über ein "Fakepath" bedient wird.

Mich wundert es, daß bei euch dieses Beispiel nicht funktioniert. Bei mir funktioniert es problemlos.

Esadat, bei dir vermute ich, Du hast ja wenigstens einen Grund genannt, daß es am lokalen System liegt, auch wenn ich diesen Grund nicht nachvollziehen kann..

e Mit jQuery scheint es ja möglich zu sein, obwohl ich da glaube, dass das Bild auf den Server geladen wird...

Natürlich wird es das, aber nicht, um die Vorschau zu generieren.
esadat

esadat hat kostenlosen Webspace.

10:42, 5.5.2013

Mich wundert es, daß bei euch dieses Beispiel nicht funktioniert. Bei mir funktioniert es problemlos.

Das liegt an den Sicherheitseinstellungen, damit die Webseite nicht auf dein Dateisystem zugreifen kann. Du hast die Seite wahrscheinlich als vertrauenswürdig deklariert oder nutzt nen alten Browser/IE?

aber es gibt eine geschmeidige lösung: HTML5 FileAPI

Verdammt geile Lösung! Leider gehts nicht mit

- Safari 5
- IE 10? Sollte der nicht HTML5 tauglich sein?

Kennt ihr Alternativen, die auf den meisten "relativ aktuellen" Browsern funktionieren?

Wieso kann überhaupt jQuery auf das Dateisystem zugreifen, wenn doch aus Sicherheitsgründen der Zugriff von Inputs auf das Dateisystem gesperrt ist? Gibts evtl. andere Herangehensweisen?
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city