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

Question

我有截图作为二进制字符串.我想使用$ .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');
});

如何将参数指定为附件？

Answer 1

使用 data

例:

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

请参阅:http://api.jquery.com/jQuery.post/

Answer 2

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

如果我正确阅读了您的问题，那么您正在将HTML“屏幕截图”保存到canvas元素。如果是这样，则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 inspector，将看到已创建正确的多部分请求：

------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);
?>

Answer 3

您需要做一些事情。

首先，您需要分解 filedataUrl。您只需要 Base64 数据，而不需要其余数据。然后使用客户端Javascript中的Base64编码和解码中的方法将字符串进行base64解码为保存二进制数据的变量。

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