Resim yükleme ajax ile

Question

Biliyorum, birçok öğretici var, ama onları nasıl çalıştıracağını anlayamıyorum.

benim Javascript kodu ı yazdırabilirsiniz bir nesne <img src="data:image/png;base64..."> olduğunu ben img var Sonuç olarak

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

yoktur

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

:

ben dosya yükleme için bir giriş formu var.

Bunu bir süredir kullanıyorum, ancak şimdi iş akışını değiştirmem gerekiyor. Amacım artık görüntüyü yazdırmak yerine kaynağını sunucuya göndermektir (sunucu kodu iyi çalışıyor). Resim kaynağını sahip olduğum yerden nasıl alacağımı anlayamıyorum (sadece data:image/png;base64... bölümü). Birisi bana bir ipucu verebilir mi?

Answer 1

deneyin

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 String olarak sunucuya data URIaImg gönderme http://jsfiddle.net/8gjb82b6/1/