Bild hochladen mit Ajax

Question

Ich weiß, es gibt viele Tutorials, aber ich kann nicht herausfinden, wie man sie arbeiten lässt.

Ich habe ein Eingabeformular für Datei-Upload:

<input onChange="userPreviewImage(this)" type="file" accept="image/*" style="display:none"/> 

Es ist mein Javascript-Code

function userPreviewImage (fileInput) { 
    save = true; 
    var files = fileInput.files; 
    var file = files[0]; 
    current = file; 
    var imageType = /image.*/; 
    var img = document.createElement("img"); 

    img.classList.add("obj"); 
    img.classList.add("preview"); 
    img.file = file; 

    var reader = new FileReader(); 
    reader.onload = (function(aImg) { 
     return function(e) { 
      aImg.src = e.target.result; 
     }; 
    })(img); 
    reader.readAsDataURL(file); 
} 

Als Folge ich img haben, die ein Objekt ist <img src="data:image/png;base64...">, die ich ausdrucken.

Ich benutze dies für eine Weile, aber jetzt muss ich den Workflow ändern. Mein Ziel ist jetzt, anstatt das Bild zu drucken, seine Quelle an den Server zu senden (der Server-Code funktioniert gut). Ich kann nicht herausfinden, wie man die Bildquelle von dem bekommen kann, was ich habe (nur der data:image/png;base64... Teil). Kann mir jemand einen Tipp geben?

Answer 1

Versuchen Posting data URIaImg zum Server als String

window.onload = function() { 
    this.userPreviewImage = function (fileInput) { 
     var files = fileInput.files; 
     var file = files[0]; 
     var reader = new FileReader(); 
     reader.onload = function (aImg) { 
      $.post("/echo/html/", { 
       html: aImg.target.result 
      }) 
      .then(function (data, textStatus, jqxhr) { 
       console.log(data, textStatus); 
      }, function(jqxhr, textStatus, errorThrown) { 
       console.log(textStatus, errorThrown); 
      }) 
     }; 
     reader.readAsDataURL(file); 
    } 
}; 

jsfiddle http://jsfiddle.net/8gjb82b6/1/