work.log

元エンジニアの備忘録的ブログ

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

投稿:2014-06-03 16:47  更新:

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

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

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

外部リンク
GitHub – dnd_file_upload

セットアップは 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']);
}

?>

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

おすすめのVPSサーバ

  • OSが選べる
  • VPS同士でLANが組める
  • 複数台構成向き

このブログで使っています。

  • 転送量が多いサービスに
  • 借りてるのは3年間一度もdown無し!

よく見られている記事

  • 本日
  • 週間
  • 月間