javascript - 使用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/