Как указать двоичные данные в 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, а не остальные. Затем используйте методы кодирования и декодирования Base64 в Javascript на стороне клиента для декодирования base64 строки в переменную, содержащую двоичные данные.

Затем включите эту переменную в свой почтовый запрос.

Answer 4

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')
})

Answer 5

Я не думаю, что вы можете загрузить изображение, используя имя файла.Вам может потребоваться создать форму с элементом ввода файла, где пользователь может выбрать файл (не через javascript).

Затем отправьте форму, используя AJAX.