Question

如何使用$ .ajaxFileUpload上传画布中呈现的图像，使其成为HttpContext.Current.Request.Files的一部分？

正常文件上传工作正常：

$.ajaxFileUpload({
    url: "<%=AppRoot %>" + "upload",
    secureuri: false,
    fileElementId: "fld_image",
    dataType: "json",
    success: function (data, status) {
        if (typeof (data.error) != "undefined") {
            if (data.error) {
                //print error
                alert(data.error);
            }
        }
        else {
            $("#fld_image_hidden").remove();
            $(".heading").css("background-image", "url(<%= AppRoot %>" + data.Url + ")");
            var imagehidden = $("<input type=\"hidden\" id=\"fld_image_hidden\" name=\"fld_image_hidden\" value=\"" + data.Url + "|" + data.Name + "\" />");
            $("#Template_ID").after(imagehidden);
        }
        $("#fld_image").remove();
    },
    error: function (data, status, e) {
        alert(e);
    }});

但无法使用canvas实现它：

var upload = $("<input type=\"file\" id=\"fld_image\" name=\"fld_image\" />");
upload.on("change", function () {
if ($(this)[0].files[0].size > 5000000) {
    alert("The file size may not exceed 5 MB.");
    return;
}

var filesToUpload = $(this)[0].files;
var file = filesToUpload[0];

var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function (e) {
    console.log(e);
    img.src = e.target.result;

    var canvas = $("#canvasImage")[0];


    var MAX_WIDTH = 500;
    var MAX_HEIGHT = 500;
    var width = img.width;
    var height = img.height;

    if (width > height) {
        if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
        }
    } else {
        if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
        }
    }
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);

    var dataurl = canvas.toDataURL();
    console.log(dataurl);
    //Do ajaxFileUpload here
    $.ajaxFileUpload({
        url: "<%=AppRoot %>" + "upload",
        secureuri: false,
        fileElementId: "canvasImage",
        dataType: "json",
        success: function (data, status) {
        },
        error: function (data, status, e) {
            alert(e);
        }
    });
 });

画布用于在将图像上传到服务器之前缩小图像。

Answer 1

最后，我根据这篇文章的指导，Canvas Upload：

这样做了

var dataurl = canvas.toDataURL("image/png");
dataurl = dataurl.replace('data:image/png;base64,', '');

var ajax = new XMLHttpRequest();
ajax.open("POST", "<%=AppRoot %>" + "upload", false);
ajax.setRequestHeader("Content-Type", 'application/upload');
ajax.send(dataurl);

在服务器上：

File.WriteAllBytes

$ .ajaxFileUpload与canvas一起使用

1 个答案: