kostenloser Webspace werbefrei: lima-city


Vorschaubild für Upload

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    schachfeld

    schachfeld hat kostenlosen Webspace.

    Hallihallo,
    Ich komme mal wieder mit einer Frage denn ich suche schon einige Zeit im Internet nach einer Lösung, wie ich eine Bildvorschau 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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. 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
  4. Autor dieses Themas

    schachfeld

    schachfeld hat kostenlosen Webspace.

    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? :)
  5. 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...

  6. h**s

    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
  7. 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.
  8. 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?
  9. 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

Login zum Webhosting ohne Werbung!