0

我有一个脚本，它通过多部分 POST 获取一个大型 CSV 文件并返回一个 png。我想通过 ajax 提交表单并在当前网页上显示该 png。我似乎无法弄清楚该怎么做。

基于这个问题和这个问题，我拼凑了一个不工作的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;
    });
});
4

1 回答 1

0

您可以使用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));
});
于 2014-02-16T21:05:40.697 回答