web-dev-qa-db-ja.com

input type = "file" set base64 image data

私はキャンバスを持っており、canvas.toDataURL('image/png')の助けを借りてキャンバスから画像データを取得します。

問題：<input type="file" />は、base64データではなくvalueとしてファイルパスを要求します。

質問：ローカルファイルシステムに保存せずに<input type="file" />を使用してbase64画像データをサーバーに送信する方法

私の回避策：非表示の入力<input type="file" />を試しましたが、サーバーにはファイル名プロパティが必要です

たぶん、XmlHttpRequestでこれを克服することは可能ですか？

javascripthtmlajaxhtml5-canvas
13
VB_

フォームに非表示の入力要素を作成するだけです。 （typeに注意してください）

<input type="hidden" name="myHiddenField">

送信する前に、要素の値にデータを添付してください。

var imageData = canvas.toDataURL('image/png');
document.getElementsByName("myHiddenField")[0].setAttribute("value", imageData);

更新

サーバーが送信されたデータにパラメーター「filename」を含めることを要求する場合は、その文字列をinput要素の名前として含めます。

<input type="hidden" name="filename"/>

これにより、フォームに "filename"パラメータを含めてデータを送信します。

これにXMLHttpRequestを使用する場合のサンプルは次のとおりです。

//Prepare data to be sent
var imageData = canvas.toDataURL('image/png');
var params = "filename=" + imageData;

//Initiate the request
var httpRequest = new XMLHttpRequest();            
httpRequest.open('POST', 'test.php', true);

//Send proper headers
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpRequest.setRequestHeader("Content-length", params.length);
httpRequest.setRequestHeader("Connection", "close");

//Send your data
httpRequest.send(params);
10
Charlie

FileReaderを使用できます。ここで例を確認してください： https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

0
Natural Lam