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/

使用ajax上传图片

1 个答案: