通过 ajax 发送 blob 数据答案

【问题标题】：Sending blob data via ajax通过 ajax 发送 blob 数据
【发布时间】：2015-08-21 14:27:16
【问题描述】：

所以我试图通过 ajax 将图像作为 blob 发送。该 blob 具有正确的类型，大小约为 4.5 kb。我尝试这样发送：

document.getElementById("canvas").toBlob(function (blob) {
    var data = new FormData();
    data.append('name', name);
    data.append('program', YouTomaton.Main.get_CurrentProgram());
    data.append('image', blob);
    $.ajax({
        type: "Post",
        url: "save.php",
        data: data,
        processData: false,
        contentType: false,
        success: function (result) {
            if(result != undefined && result.length > 0)
                alert(result);
        }
    });
});

接收页面如下所示：

<?php
include("session.php");
writeProgram($_POST['name'], $_POST['program'], $_POST['image']);
?>

它告诉我找不到索引“图像”。所以不仅数据没有被发送，甚至索引也被省略了。我做错了什么？

编辑：toBlob 和 toDataURL 都不产生任何东西，只是一个空的 PNG。有没有办法将帧缓冲区中的数据转换为 base64 编码的 jpg 或 png ？

【问题讨论】：

标签： javascript ajax blob

【解决方案1】：

阅读this。然后想想你想做什么。

如果您可以使用 jQuery 插件。我会推荐使用FileUpload

对于 HTML 文件输入，最小语法如下：

<input type="file" name="fs" id="fileupload" />

还有JS脚本：

$('#fileupload').fileupload({
                url: "fileupload?additional=data",
                done: function (e, data) {
                    console.log(data.result);
                }
            }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');

【讨论】：

好的，他的第一个建议怎么样？保存画布和发布图片不是您的选择吗？
杰克，我绝对不能要求用户手动上传任何东西。我想知道为什么 ajax 解决方案不起作用......编辑：第二个链接看起来很有希望......
不幸的是 toDataURL 产生一个空白图像
var canvas = document.getElementById("gameCanvasId"); var dataURL = canvas.toDataURL(); console.log(dataURL);

【解决方案2】：

我现在正在处理类似的问题 - 我正在使用 PDF - 这是我的工作 ajax 调用：

$.ajax({
            dataType: "native",
            url: ("handle.php?filename=" + event.target.dataset.name),
            xhrFields: { responseType: "blob" },
            data: "secure=<?php echo $pass ?>",
            success: function(result){
                    console.log(result.size)
                    download(result, event.target.dataset.name, "application/pdf")
            }
        })

download() 部分是对 FileSaver 工具的调用 - 在我的情况下，这就是 Blob 在客户端保存的方式...

我在标记中使用 data-name attr 来存储文件名（不是完整路径） - 希望对您有所帮助！

编辑:: 抱歉混入了 PHP！ - 该语句只是将一个散列的 nonce 令牌传递给脚本，以确保没有请求被重复/gotton 乱序 - 等等...

【讨论】：