2013年7月23日火曜日

HTML5 ドラッグ&ドロップでファイルをアップロード

---
プログラム修正しました (2014/03/30)
ご報告ありがとうございました
---

HTML5 のドラッグ&ドロップ API  と jQuery.ajax() を使って、
ブラウザ上にドラッグ&ドロップしたファイルをサーバへアップロードする方法です。

ソースは GitHub へ上げました。
https://github.com/yokano/dnd_file_upload

以下の流れで実現出来ます。
  1. dropzone にファイルがドロップされる
  2. drop イベントが発生する
  3. イベントオブジェクトの dataTransfer からファイルを取得する
  4. FormData を作成してファイルを追加する
  5. Ajax でファイルを送信する
HTML
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>ドラッグ&ドロップでファイルアップロード</title>
  <link rel="stylesheet" href="dnd.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="dnd.js"></script>
 </head>
 <body>
  <h1>画像ファイルのアップロード</h1>
  <div id="dropzone" dropzone>
   ここへ画像ファイルをドロップ
  </div>
 </body>
</html>

JavaScript
$(function() {
 $('#dropzone').on('drop', function(event) {
  var file = event.originalEvent.dataTransfer.files[0];
  var formData = new FormData();
  formData.append('file', file);
  
  $.ajax('./upload.php', {
   method: 'POST',
   contentType: false,
   processData: false,
   data:formData,
   error: function(xhr, error) {
    console.log('アップデートに失敗しました');
    console.log(error);
   },
   success: function(response) {
    console.log('アップロードに成功しました');
    console.log(response);
    
    
   }
  });

  return false;
    
 }).on('dragover', function(event) {
  return false;
 });
});
PHP
<?php

if(is_uploaded_file($_FILES['file']['tmp_name'])) {
 move_uploaded_file($_FILES['file']['tmp_name'], './' . $_FILES['file']['name']);
}

?>

サーバから見た場合、以下の <form> からファイルがアップロードされた時と、
全く同じデータがクライアントから渡されます。
formData.append('file', file) の 'file' が <input> タグの name 属性に対応します。
<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file"></file>
</form>

ドラッグ&ドロップについてはこちら
Drag and drop - W3C

FormData についてはこちら
The FormData Interface - W3C

jQuery.ajax() についてはこちら
jQuery.ajax() - jQuery

2 件のコメント:

  1. うごかね・・・

    返信削除
    返信
    1. 設置ディレクトリのパーミッションが書込み可能になっていない場合、
      ファイルがアップロードされません。
      パーミッションが読み込み専用になっている可能性が考えられますので、
      確認してみてください。

      削除