javascript で、ドロップされたファイルを PHP でサーバへPOST

javascript で、ドロップされたファイルを PHP でサーバへPOST

ドロップまでは沢山説明あるんだけど、テキストファイルをドロップしてオッケ～とか思っていたら、バイナリデータが破損とかいろいろあったので、ドロップ後の手続きをメモ

javascript 側

• FileReader クラスを使用 readAsDataURL() メソッドを使って読み込み
• ajax で post(filename: ファイル名, filedata: ファイルの中身)

 var fileReader = new FileReader();
  fileReader.onload = function(event) {
   $.ajax({
    type : "POST", 
    url : "filesave.php",
    data: {
     'filename': file.name,
     'filedata': event.target.result
    },

    success : function(data){
     alert("done");
    },
    error: function(r1, r2, r3){
     alert("error");
    }
   });
  }
  fileReader.readAsDataURL(file);

バイナリファイルを扱う場合、readAsBinaryString() を使うと、post時にバイナリを無理矢理 UTF8でエンコードするらしく、ゴミが入ってしまった (テキストファイル等の場合は、問題ないんだけどね)

PHP側

• postデータに、mime-type;base64,data... みたいな形で入っているので、data部分を分離
• base64_decodeでデコードして、ファイルへ保存

 $dataparts = explode(',', $_POST['filedata'], 2);
 file_put_contents($_POST['filename'], base64_decode($dataparts[1]));