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

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

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

javascript 側

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

1. var fileReader = new FileReader();  
2.  fileReader.onload = function(event) {  
3.   $.ajax({  
4.    type : "POST",   
5.    url : "filesave.php",  
6.    data: {  
7.     'filename': file.name,  
8.     'filedata': event.target.result  
9.    },  
10.   
11.    success : function(data){  
12.     alert("done");  
13.    },  
14.    error: function(r1, r2, r3){  
15.     alert("error");  
16.    }  
17.   });  
18.  }  
19.  fileReader.readAsDataURL(file);  

 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でデコードして、ファイルへ保存

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

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