サイトアイコン 高性能計算研究室

卒研メモ:DropzoneJSを用いたファイルアップロード例

 以前にも書いた通り,JavaScriptを活用したファイルアップロード例の第一弾ができたので,ここに追加予定の素材を手短にまとめておきます。

 まずはDropzoneJSを使用した例を示します。jQueryの例は後ほど。

1. HTMLフォーム,PHPスクリプトだけでファイルアップロードができることを確認する。この例ではどちらも同じディレクトリ(フォルダ)に置いておく設定になっていることに注意。イメージファイルはその直下のimgディレクトリにコピーする。

HTMLフォーム

PHPスクリプト(upload_normal.php)

 これでアップロードができないようなら,HTMLフォーム(nameなど),PHPスクリプト,アップロード先のimgディレクトリの書き込み権限を確認すること。

2. DropzoneJSのソース(dropzone.js, dropzone.css)をダウンロードして適切なディレクトリに置いておく。ここではHTMLフォーム,PHPスクリプトと同じディレクトリに置いておく設定。

3. HTMLフォームのソースを下記のように書き換える。

ブラウザで開くと次のようにドロップエリア(四角の枠内)が表示されるので,ファイルをドラッグ&ドロップしてみる。

 下記のようになり,自動的にファイルがアップロードされたことを確認する。

4. DropzoneJSのオプションを利用して,次の機能

を追加したHTMLフォームを用意する。ネタ元はこちら

 このフォームをブラウザで見ると,次のような画面になる。

 なお,PHPスクリプト(upload_dropzone_option.php)はfileフォームの名前を”image_file”に変更しただけである。

 画像ファイルをドラッグ&ドロップしたらアップロードが開始され,終了したファイルから自動削除されることを確認すること。

モバイルバージョンを終了