通过ajax发送blob数据

Question

所以我试图通过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？

Answer 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');

Answer 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在客户端保存的方式......

我在标记中使用数据名称attr来存储JUST文件名（不是完整路径） - 希望有帮助！

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