ファイルアップロードでHTML5-ドラッグ_ドロップと、ajax画像送信とPHP受信処理。2013-11-13

11月前半ですけど寒くなってきましたね。鍋の季節！！

さて、ファイルのアップロード機能について
HTML5 のDrag & Drop、Ajax(jQuery)送信、PHP(cakePHP 2.1.x)の受信の
実装などについてメモです。
（客先見積りの関係で調べてましたが、結構ハマリました。）

動作確認は、Chromeのみです。

cakePHPの app/ 以下のみですが、Gitに置いてます。どうぞ。
https://github.com/kuc-arc-f/php_cake11

win版のXAMPPで開発 (unix版はそのまま動くか未定です。)
コンテキスト=cake11

============================================内容の説明など
[1] /cake11/posts/dnd6 で画面起動します。
div要素の [ここへ画像ドロップ]　領域にドロップします。

[2] アップロードされます。
　（１個だけ、複数の場合はループ処理にすればできるはず！）

[3] Controller, ajaxの送信先は upload5（）です。

class PostsController extends AppController {
    public $helpers= array('html' ,'Form');

        public function upload5(){
//var_dump( $_FILES['files']['name'] );
                        $uploadfile = "../webroot/img/"  .  $_FILES['file']['name'] ;
                        if (move_uploaded_file( $_FILES['file']['tmp_name'] , $uploadfile) == false ) {
                     $response = array('ret'=> "0");
                         echo json_encode($response );
                         exit();
                         }else{
                     $response = array('ret'=> "1");
                         echo json_encode($response );
                         exit();
                         }
        }

        public function dnd6(){
                $this->set('title_for_layout', 'upload dnd5');
                $this->layout = null;
        }
}

[3] View (/ cake11 / app / View / Posts / dnd6.ctp)
ドロップされたら、
ＨＴＭＬ５のFormDataに、form要素をセットし、
ajax送信してます、コールバックで、アップされたIMGを描画してます。

<script type="text/javascript">
function send_imgfile( files ){
 $form = $("#hogeForm");
          fd = new FormData($form[0]);
          fd.append('file', files[0] );
   $.ajax('/cake11/posts/upload5', {
     type: 'post',
     processData: false,
     contentType: false,
     data: fd,
     dataType: 'html',
     success: function(data){
       console.log(data);
alert(  'complete send :'+files[0].name );
disp_items( files[0].name );
     }
   });
   return false;
}
</script>

<div id="dropzone"  ondragover="onDragOver(event)" ondrop="onDrop(event)">
    <p>ここへ画像を<br />ドロップ</p>
</div>
<div id="id_form_div" style="display: none;">
<form id="hogeForm" method="post" action="" enctype="multipart/form-data">
  <div><input type="file" name="file1"></div>
  <div>ファイルの説明：<input type="text" name="hogeText"></div>
  <input id="hogeSubmit" type="submit" value="うｐする">
</form>
</div>

<script type="text/javascript">
function onDrop(event){
    var files = event.dataTransfer.files;
    send_imgfile( files );

    event.preventDefault();
}
</script>

============================================

*) cakePHPの app/ 以下のみですが、Gitに置いてます。どうぞ。
https://github.com/kuc-arc-f/php_cake11

それでは、また会いましょう。