使用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 URI aImg到服务器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/