入力タイプ= "ファイル" base64画像データを設定

Question

私はキャンバスを持ち、canvas.toDataURL('image/png')の助けを借りてそれから画像データを取り出す。

問題：<input type="file" />ではなく、base64でエンコードされたデータのvalueとしてファイルパスを望んでいます。

質問：ローカルファイルシステムにそれらを保存せずに<input type="file" />の助けを借りて、サーバーにbase64で画像データを送信する方法は？

私の回避策は：は隠し入力<input type="file" />を試してみましたが、サーバは

filenameプロパティを必要と多分それはXmlHttpRequestのでこれを克服することが可能ですか？

Answer 1

あなたは、FileReaderのを使用し、ここでの例を確認することができます：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Answer 2

はちょうどあなたのフォームに隠し入力要素を作成します。送信する前に要素の値にデータを添付し

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

（タイプに気づきます）。

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

UPDATE

サーバーの需要は、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);