プロトタイプjsのAjaxリクエストからアップロード/ハンドルファイル

Question

prototype.js Ajaxリクエストからファイルを処理しようとしていますが、動作しません。データがコントローラに入っていません（$ _FILES）。

私はMagentoでCheckoutに1ステップを追加し、ファイルをアップロードして次のステップに進む必要があります。

以下のコードも試してみました。

var request = new Ajax.Request(
       this.saveUrl, 
       { 
        method: 'post', 
        requestHeaders: {"X-Prototype-Version": null}, 
        contentType: 'multipart/form-data', 
        onComplete: this.onComplete, 
        onSuccess: this.onSave, 
        onFailure: checkout.ajaxFailure.bind(checkout), 
        postBody: formData, 
       } 
      ); 

ここをクリックしてください。

Answer 1

申し訳ありませんが、ファイルのアップロードはajaxで簡単にはできません。

ajaxを介してポストすると、ファイル入力フィールドがスキップされるか、（ファイルデータではなく）ファイル名のみが取得されます。

バイナリデータを送信する方法はありますが、別の方法があります。

HTML5 File/FileReader APIを使用すると、ファイルをjavascriptで読み取ってから、ファイルの内容をリクエストの本文として入れることができます。

new Ajax.Request('/url.php?rawupload=1&id='+$F('id')+'&label='+label, 
{ 
    'method':'post', 
    'postBody':fileobject, 
    'onSuccess':function() { alert('success'); } 
}); 

フォームフィールドをGETパラメータに入れてPHPスクリプトに渡す必要があります。あなたのPHPスクリプトでファイルの内容は、アップロードしたファイルの内容が含まれていますし、あなたのファイルシステムに書き込むか、内容を読み取ることができ、この

$file = file_get_contents('php://input'); 

$fileのように利用できるようになります

など