如何在jquery post函数中指定二进制数据答案

【问题标题】：how to specify binary data in jquery post function如何在jquery post函数中指定二进制数据
【发布时间】：2023-04-06 05:58:02
【问题描述】：

我将屏幕截图作为二进制字符串。我想使用 $.post() 函数将一些数据发布到服务器。

我的代码：

var filename = "screenshot.jpg":
var filedataUrl = "";// string like 'data:image/jpeg;base64,/9j/4A .....'

$.post(serverUrl, {
title: title
name: name

/*here must be my file */

}, function(response) {
                alert('ok');
});

如何将参数指定为附件？

【问题讨论】：

你可能对这篇帖子stackoverflow.com/questions/19148065/…的答案感兴趣

标签： jquery post upload binary

【解决方案1】：

你需要做一些事情。

首先，您需要分解 filedataUrl。您只需要 base64 数据，而不需要其他数据。然后使用Base64 encoding and decoding in client-side Javascript中的方法将字符串base64解码为存放二进制数据的变量。

然后在您的发布请求中包含该变量。

【讨论】：

【解决方案2】：

我认为您不能使用文件名上传图像。您可能需要创建一个带有文件输入元素的表单，用户可以在其中选择一个文件（不是通过 javascript）。

然后使用 AJAX 提交表单。

【讨论】：

我还有图片。这是浏览器截图。我只需要将它作为文件传递。
在这种情况下，最好的选择是将文件转换为 base64 并通过 ajax 发布。 @Ariel 的回答适合你。

【解决方案3】：

使用data

例子：

$.post({
  url: serverUrl,
  data: {
    'fileasstring': filedataUrl
  },
  success: function(response) {
    alert('ok');
  }
});

见：http://api.jquery.com/jQuery.post/

【讨论】：

【解决方案4】：

从技术上讲，base64 是二进制数据的文本表示 - 如果您对此感到满意，则上述答案是正确的。如果你想发送真正的二进制数据，你必须使用FormData。

如果我正确阅读了您的问题，您正在将 html“屏幕截图”保存到画布元素。如果是这样，而不是阅读toDataURL，您应该使用toBlob。这将为您提供我们可以使用FormData发送的二进制数据

var form = new FormData();

form.append('image', blob, 'image.jpg');

以上可以使用普通XMLHttpRequest发送：

var request = new XMLHttpRequest();

request.open('POST', 'http://foo.com/submitform.php');
request.send(form);

工作示例 -> codepen

如果您查看 chrome 检查器，您会看到创建了正确的多部分请求：

------WebKitFormBoundaryGWsPW93HnMPQFcXB
Content-Disposition: form-data; name="image"; filename="image.jpg"
Content-Type: image/jpeg

------WebKitFormBoundaryGWsPW93HnMPQFcXB--

您也可以使用 jQuery 发送上述表单：

$.ajax({
    url: 'http://foo.com/submitform.php',
    type: 'POST',
    data: form,
    processData: false,
    contentType: false
});

更新

刚刚看到您关于在 PHP 中处理服务器端文件上传的通知。上传的文件在 $_FILES 数组中可用：

<?php
    $uploaddir = '/var/www/uploads/';
    $uploadfile = $uploaddir . basename($_FILES['image']['name']);
    if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile)) {
        echo "File was successfully uploaded.\n";
    } else {
        echo "Error";
    }
    echo 'File info:';
    print_r($_FILES);
?>

【讨论】：

【解决方案5】：

base64 编码的图像也是一个普通的字符串。您可以将其作为 data 传递给 jQuery POST。

如下所示。

var filename = "screenshot.jpg":
var filedataUrl = "";// string like 'data:image/jpeg;base64,/9j/4A .....'

$.post(serverUrl, {
  title: title,
  name: name,
  image: filedataUrl,
})
.done(function(res){
  alert('ok')
})

【讨论】：