HTML5の革新により、ドラッグアンドドロップインターフェイスの作成がはるかに簡単になりました。 残念ながら、これらの技術革新にはまだ広範なブラウザーサポートがありませんが、これがすぐに変わることを願っています（現在はFirefox 4以降、Chrome、Opera 11.10で動作します）。
マークアップ
この記事は専門家よりも初心者向けに書かれたものだとすぐに言わなければなりません。 したがって、いくつかの点について詳しく説明します。
開始するには、次のコンテンツを含むHTMLファイルを作成する必要があります。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Drag and Drop </title> <link rel="stylesheet" href="/style.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="/script.js"></script> </head> <body> <form action="/upload.php"> <div id="dropZone"> , . </div> </form> </body> </html>
私たちとのすべての作業は、dropZoneコンテナーで行われます。 次に、ドキュメント（style.css）のスタイルを追加します。
body { font: 12px Arial, sans-serif; } #dropZone { color: #555; font-size: 18px; text-align: center; width: 400px; padding: 50px 0; margin: 50px auto; background: #eee; border: 1px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #dropZone.hover { background: #ddd; border-color: #aaa; } #dropZone.error { background: #faa; border-color: #f00; } #dropZone.drop { background: #afa; border-color: #0f0; }
スタイルでは、dropZone要素の3つの状態に気付くことができます。ホバー時、エラーがある場合、および実行の成功時です。
ダウンロードスクリプト
次に、最も興味深い部分、つまりJavaScriptコードの作成から始めます。 まず、変数を作成する必要があります。変数の1つにはdropZoneを配置し、2番目の変数には最大ファイルサイズを指定します。
$(document).ready(function() { var dropZone = $('#dropZone'), maxFileSize = 1000000; // - 1 . });
次に、ブラウザがドラッグアンドドロップをサポートしているかどうかを確認する必要があります。そのためには、FileReader関数を使用します。 ブラウザがドラッグアンドドロップをサポートしていない場合、dropZone要素内に「ブラウザでサポートされていません！」と記述し、「エラー」クラスを追加します。
if (typeof(window.FileReader) == 'undefined') { dropZone.text(' !'); dropZone.addClass('error'); }
次に行うことは、ファイルをdropZoneにドラッグしたときの効果のアニメーションです。 ondragoverイベントとondragleaveイベントを使用して、これらのアクションを追跡します。 ただし、これらのイベントはjQueryオブジェクトによって追跡できないため、「dropZone」だけでなく「dropZone [0]」も参照する必要があります。
dropZone[0].ondragover = function() { dropZone.addClass('hover'); return false; }; dropZone[0].ondragleave = function() { dropZone.removeClass('hover'); return false; };
次に、「ondrop」イベントハンドラを記述する必要があります。これは、ドラッグされたファイルが下げられたときのイベントです。 一部のブラウザでは、ファイルをブラウザウィンドウにドラッグすると自動的に開きます。そのため、ブラウザの標準的な動作をキャンセルする必要があります。 また、「hover」クラスを削除し、「drop」クラスを追加する必要があります。
dropZone[0].ondrop = function(event) { event.preventDefault(); dropZone.removeClass('hover'); dropZone.addClass('drop'); };
次に、ファイルサイズのチェックを追加する必要がありますこれを行うには、次のコード行をondropハンドラーに追加します。
var file = event.dataTransfer.files[0]; if (file.size > maxFileSize) { dropZone.text(' !'); dropZone.addClass('error'); return false; }
次に、ファイルをハンドラーに送信するAJAXリクエストを作成する必要があります。 AJAXリクエストを作成するには、XMLHttpRequestオブジェクトを使用します。 XMLHttpRequestオブジェクトに2つのイベントハンドラーを追加します。1つはファイルの読み込みの進行状況を表示し、2つ目は読み込みの結果を表示します。 upload.phpファイルをハンドラーとして指定します。
var xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', uploadProgress, false); xhr.onreadystatechange = stateChange; xhr.open('POST', '/upload.php'); xhr.setRequestHeader('X-FILE-NAME', file.name); xhr.send(file);
次に、ダウンロードの進行状況とダウンロード結果の機能を扱います。 uploadProgress関数には複雑なものはなく、最も単純な数学です。
function uploadProgress(event) { var percent = parseInt(event.loaded / event.total * 100); dropZone.text(': ' + percent + '%'); }
stateChange関数では、ブートプロセスが完了したかどうかを確認する必要があり、完了している場合は、エラーが発生したかどうかを確認する必要があります。 成功した要求コードは「200」です。コードがこれと異なる場合、これはエラーが発生したことを意味します。
function stateChange(event) { if (event.target.readyState == 4) { if (event.target.status == 200) { dropZone.text(' !'); } else { dropZone.text(' !'); dropZone.addClass('error'); } } }
JavaScriptパーツのスペルが完了しました。
サーバー側
あとは、ファイルを適切な場所に保存する最も簡単なハンドラーを作成するだけです。 ハンドラーの作成では、深く掘り下げることはせず、PHPの小さな例を紹介します。
<?php $uploaddir = getcwd().DIRECTORY_SEPARATOR.'upload'.DIRECTORY_SEPARATOR; $uploadfile = $uploaddir.basename($_FILES['file']['name']); move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile); ?>
以上で、この記事がお役に立てば幸いです。
ここからソースファイルをダウンロードできます。
記事の翻訳と改訂： HTML5ネイティブドラッグアンドドロップファイルのアップロード