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

あなたはいくつかのことをする必要があります。

まず、filedataUrlを分割する必要があります。残りのデータではなく、base64データのみが必要です。次に、Base64 encoding and decoding in client-side Javascriptのメソッドを使用して、文字列をバイナリデータを保持する変数にbase64でデコードします。

その後、その変数を投稿リクエストに含めます。

Answer 2

ファイル名を使用して画像をアップロードすることはできません。ユーザーがファイルを選択できるファイル入力要素を持つフォームを作成する必要があります（javascriptではなく）。

次に、AJAXを使用してフォームを送信します。

Answer 3

使用data

例：

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

参照：http://api.jquery.com/jQuery.post/

Answer 4

技術のbase64では、バイナリデータのテキスト表現である - これ以上の答えが正しいとあなたは大丈夫です場合。実際のバイナリデータを送信する場合は、FormDataを使用する必要があります。

質問を正しく読んでいる場合は、htmlの「スクリーンショット」をcanvas要素に保存しています。その場合は、toDataURLの代わりにtoBlobを使用してください。 - >codepen

あなたはクロームインスペクターになります場合は

var request = new XMLHttpRequest(); 

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

の作業例：これは、我々はFormData

var form = new FormData(); 

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

以上を使用して送信することができたバイナリデータは定期的にXMLHttpRequestを使用して送信することができますを与えるだろう正しいマルチパートリクエストが作成されていることがわかります：

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

------WebKitFormBoundaryGWsPW93HnMPQFcXB-- 

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

更新

ちょうどPHPでサーバ側でファイルアップロードの取り扱いについてご通知を見た：

また、jQueryを使ってフォーム上に送信することができます。アップロードされたファイルは、$ _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 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') 
})