Caricamento immagine con ajax

Question

Lo so, ci sono molti tutorial, ma non riesco a capire come farli funzionare.

Ho un modulo di input per il caricamento di file:

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

c'è la mia codice Javascript

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); 
} 

Come risultato ho img, che è un oggetto <img src="data:image/png;base64..."> che posso stampare.

Ho usato questo per un po ', ma ora ho bisogno di cambiare il flusso di lavoro. Il mio obiettivo ora è invece di stampare l'immagine, inviare la sua origine al server (il codice del server sta funzionando bene). Non riesco a capire come ottenere la fonte dell'immagine da quello che ho (solo la parte data:image/png;base64...). Qualcuno può darmi un consiglio?

Answer 1

prova a pubblicare data URIaImg al server come 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/