So laden Sie Bilder vom lokalen Rechner zum JS-Objekt und vermeiden das Laden auf den Server

Question

Ich möchte eine Bilddatei vom Computer direkt in ein js-Objekt laden, ohne eine serverseitige Komponente zu verwenden. Zum Beispiel möchte ich ein Bild von der lokalen Maschine auswählen und es auf einer Webseite anzeigen. Gibt es eine Möglichkeit, den Upload von Dateien auf den Server zu vermeiden?

In der Tat möchte ich eine Art mehrere Bild Loader schreiben, aber vor dem Laden auf dem Server möchte ich einige Bilder drehen, erstellen Sie eine XML-Datei mit einigen Daten wie Benutzer-ID, Bild-Dateinamen-Liste und alle zip Bilder und diese XML und dann an den Server senden. Wie kann ich das auf der Clientseite tun?

Answer 1

Es gibt einen Weg mit HTML5, aber es erfordert, dass der Benutzer die Datei in ein Drop-Ziel fallen gelassen hat oder eine <input type="file"/>-Box verwendet hat, da es sonst ein Sicherheitsproblem wäre.

Mithilfe der File-API können Sie Dateien lesen, und Sie können die Methode verwenden, um den Inhalt als data: URL für das Image-Tag festzulegen.

Hier ist ein Beispiel:

$('#f').on('change', function(ev) { 
    var f = ev.target.files[0]; 
    var fr = new FileReader(); 

    fr.onload = function(ev2) { 
     console.dir(ev2); 
     $('#i').attr('src', ev2.target.result); 
    }; 

    fr.readAsDataURL(f); 
});​ 

http://jsfiddle.net/alnitak/Qszjg/

Answer 2

die new File APIs benutzen, ist es möglich, Inhalte von der lokalen Festplatte zuzugreifen.

Sie legen ein traditionelles <input type="file"> Upload-Feld auf Ihrer Seite und behandeln das onchange Ereignis.

MDN has a good writeup with all of the details.

Ihre Event-Handler erhält ein FileListFiles enthält. Von dort können Sie FileReader.readAsDataURL(File) anrufen, um den Inhalt des Bildes abzurufen und dann diese Daten-URL an eine oder eine <canvas> Rotation übergeben.

Answer 3

Sie createObjectURL Methode des window.URL Objekt verwenden können, bedeutet dies viel Browser-Unterstützung haben allerdings nicht

http://jsfiddle.net/LvAqp/ nur in Chrome und Firefox