Question

我有一个脚本，通过多部分POST获取一个大的CSV文件并返回一个png。我想submit the form via ajax并在当前网页上显示该png。我似乎无法弄明白该怎么做。

基于this question和this question，我拼凑了一个nonworking jsfiddle。我已尝试使用和不将返回的字符串转换为Uint8Array。我不知道如何从Image.onerror事件中获取更多有用的信息。

我的功能如下：

$('#btnDoIt').click(function() {
    $("#theForm").ajaxSubmit(function(data) {
        var imageData = new Uint8Array(data.length);
        for(var i=0, j=data.length; i<j; ++i){
            imageData[i]=data.charCodeAt(i);
        }
        var blob = new Blob([imageData], {type: "image/jpeg"});
        var url = URL.createObjectURL(blob);

        var img = new Image();
        var context = document.getElementById('myCanvas').getContext("2d");
        img.onload = function() {
            /// draw image to canvas
            context.drawImage(url, 1,1);
        }
        img.onerror = function(error) {
            console.error(error);
        };
        img.src = url;
    });
});

Answer 1

您可以使用XMLHttpRequest.responseType属性从AJAX请求中获取Blob，而不是尝试手动解析字符串。我无法弄清楚如何使用您正在使用的ajaxSubmit方法设置属性，但使用XMLHttpRequest和FormData进行手动操作并不困难。这是一个进行转换的更新函数：

$('#btnDoIt').click(function() {
    var form = document.getElementById('theForm');

    var request = new XMLHttpRequest();
    request.open('GET', form.action, /* async = */ true);

    request.responseType = 'blob'; // Get a Blob back in the response property 

    request.onload = function() {
        var blob = request.response;
        var url = URL.createObjectURL(blob);

        var img = new Image();
        var context = document.getElementById('myCanvas').getContext("2d");

        img.onload = function() {
            /// draw image to canvas
            context.drawImage(img, 0, 0, context.canvas.width, context.canvas.height);
        };
        img.onerror = function(error) {
            console.error(error);
        };
        img.src = url;
    };
    request.send(new FormData(form));
});

将jquery.form ajax调用的结果放入<canvas>或<img/>标记</canvas>

1 个答案: