Przesyłanie zdjęć za pomocą ajaxu

Question

Wiem, że istnieje wiele tutoriali, ale nie wiem, jak je uruchomić.

Mam formularza wejściowego do przesłania pliku:

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

Tam jest mój kodu 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); 
} 

W rezultacie mam img, która jest przedmiotem <img src="data:image/png;base64..."> które mogę wydrukować.

Używam tego przez jakiś czas, ale teraz muszę zmienić przepływ pracy. Moim celem jest teraz wydrukowanie obrazu, wysłanie jego źródła na serwer (kod serwera działa poprawnie). Nie mogę dowiedzieć się, jak uzyskać źródło obrazu z tego, co mam (tylko część data:image/png;base64...). Czy ktoś może mi dać napiwek?

Answer 1

opublikuj data URIaImg do serwera jako 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/