Tải lên hình ảnh với ajax

Question

Tôi biết, có nhiều hướng dẫn, nhưng tôi không thể tìm ra cách làm cho chúng hoạt động.

Tôi có một hình thức đầu vào để tải lên tập tin:

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

Có mã Javascript của tôi

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

Kết quả là tôi có img, mà là một đối tượng <img src="data:image/png;base64..."> mà tôi có thể in ra.

Tôi đã sử dụng tính năng này một lúc, nhưng bây giờ tôi cần phải thay đổi quy trình làm việc. Mục tiêu của tôi bây giờ là thay vì in hình ảnh, gửi nguồn của nó đến máy chủ (mã máy chủ đang hoạt động tốt). Tôi không thể tìm ra cách lấy nguồn hình ảnh từ những gì tôi có (chỉ phần data:image/png;base64...). Ai đó có thể cho tôi một mẹo không?

Answer 1

Hãy thử đăng data URIaImg đến máy chủ như 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/