y.okano blog: HTML5 ドラッグ&ドロップでファイルをアップロード

2013年7月23日火曜日

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

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

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

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

以下の流れで実現出来ます。

dropzone にファイルがドロップされる
drop イベントが発生する
イベントオブジェクトの dataTransfer からファイルを取得する
FormData を作成してファイルを追加する
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 件のコメント:

匿名2014年2月14日 12:17
うごかね・・・
返信削除
返信

コメントを追加