Загрузка изображения с помощью ajax

Question

Я знаю, есть много учебников, но я не могу понять, как заставить их работать.

У меня есть форма ввода для загрузки файла:

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

Там мой код 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); 
} 

В результате у меня есть img, который является объектом <img src="data:image/png;base64..."> который я могу распечатать.

Я использовал это некоторое время, но теперь мне нужно изменить рабочий процесс. Теперь моя цель - вместо печати изображения, отправки его источника на сервер (код сервера работает нормально). Я не могу понять, как получить источник изображения из того, что у меня есть (только часть data:image/png;base64...). Может кто-нибудь дать мне подсказку?

Answer 1

Попробуйте разместить data URIaImg на сервер, как 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/