Greifen Sie Bild aus input-Feld, um Daten Bild / Anzeige-Bild

Habe ich schon auf der Suche und nicht in der Lage gewesen, um herauszufinden, ob dies möglich ist oder nicht.

Dies ist, was ich möchte, zu geschehen, bevor gesendet: Wenn ein Benutzer eine Datei hochgeladen werden, ich will zu greifen, die Bild-Daten und konvertieren Sie Sie in base64. Nachdem es umgewandelt wurde, möchte ich entweder direkt in eine div oder haben es geschickt, um sich mit dem server per AJAX, dann erscheint in der div.

Unten ist im Grunde das, was ich Suche:

//index.php
<input type="file" name="img" id="img" onChange="displayImg(this)">

//displayImg.js
function displayImg(img) {
   imgData = img.?;  //How do I do this?
   img64 =           //I know how to do this.
   document.write("<img src='data:image/jpeg;base64,"+img64+"' />");
}
InformationsquelleAutor Pete | 2011-09-10
  1. 6
    function displayImage(evt){
  var files = evt.target.files;
  var reader = new FileReader();

  reader.onload = function(frEvent) {
      document.getElementById("renderImage").innerHTML = '<img src="'+frEvent.target.result+'" />';
  }
  reader.readAsDataURL(files[0]);
}

    Den code oben funktioniert bei mir. Es fehlt die überprüfung und all das gute Zeug, aber dies sollte ein guter Ausgangspunkt für Sie.

    • Die "Werke" in die Browser? Wie wahrscheinlich ist es, weiterhin "arbeiten" in der Zukunft?
    • Getestet hab ich meine version von diesem code, und es funktioniert in Firefox, Chrome und Opera. Es funktioniert nicht im IE, und Safari gibt einen Fehler "ReferenceError: Can' T find variable: FileReader"
    • Ich musste mich ändern " - Leser.onload(function(theFile){" zu "Leser.onload=(function(theFile) {", um es an die Arbeit
    • kann u Aktie der code, der funktioniert in safari
    InformationsquelleAutor Josh
Schreibe einen Kommentar