HTML5のコンテンツにファイルをドラッグ&ドロップでアップロードする

HTML5 で作ったページにファイルをドラッグ&ドロップでアップロードするメモです。

WordPress にもついていますが、画像等をブラウザにドラッグ&ドロップするとサーバにアップロードできるアレです。

ネットで実装方法何かを調べてみたら正にそのものが既に出来上がってたので使ってみました。

セットアップは Web の公開領域でこんな感じに。

$ git clone https://github.com/yokano/dnd_file_upload ./dnd

公開領域自体に Web 経由での書き込み権限があればこの状態で OK。

自分の環境では都度権限を設定する事にしているのでこんな感じに追加作業。

$ cd dnd
$ mkdir upload
$ chmod 777 upload

ディレクトリを作ったら中の PHP もそれに合わせる。

<?php

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

?>

不特定多数が利用する環境であればファイルの種類だとか、例外を処理しないといけないけど自分で使うだけだったら僅か数分で使えちゃう。有り難いです。