【jQuery】ドラッグ＆ドロップでアップロード！dropzone.js
今更ながらのdropzone.jsプラグインですが、今やファイルアップロードではドラッグ＆ドロップが必須ですので念のため紹介しておきます。ちなみにサンプルコードはAWSのS3のアップロードにしています。
是非デモで動きを確認してみてくださいね。デモは実際には画像を保存するようにしていないので安心して下さい。
dropzone.jsのオススメ/ポイント
- ドラッグ＆ドロップ系ファイルアップロードプラグインの先駆け的存在
- デフォルトのデザインが既に良い
- 複数ファイルアップロードも可能
dropzone.jsのデモ
dropzone.jsのページ
dropzone.jsの使い方
それではdropzone.jsの使い方を見ていきましょう。
それぞれのコードを載せますね。
HTMLコード
CSSコード
JavaScriptコード
// jQuery本体
// dropzone.js本体
サーバ側コード
'awshogehogeKey',
'secret' => 'awshogehogeSecret',
'region' => Region::AP_NORTHEAST_1
));
// バケット名
$bucketname = 'MyBucket';
$key = "filename.png"
if(!empty($_FILES)){
$files = $_FILES['file'];
$tempFile = $files['tmp_name'];
try {
$result = $client->putObject(array(
'Bucket' => $bucketname,
'Body' => EntityBody::factory(fopen($tempFile, 'r')),
'ContentType' => $files['type'],
'StorageClass' => 'STANDARD',
'Key' => $key,
'ACL' => CannedAcl::PUBLIC_READ,
));
} catch (S3Exception $exc) {
// アップロード失敗
echo $exc->getMessage();
}
}
?>チェックポイント
デモのサーバ側コードはHello Worldを出力するだけのコードになってますので、安心してドラッグ＆ドロップして動きを確認してください。ちなみにサンプルのコードはAwsのS3にアップロードするサンプルにしています。サーバ側はご自由に変更してくださいね。
また、もしドラッグ＆ドロップする部分のデザインをカスタマイズしたい場合はオプションのpreviewTemplateを使ってpreviewTemplate:'<div>hogehoge</div>'のように指定してオリジナルのデザインに変更出来ます。
他にもアップロード終了後のイベント取得や色々オプションがあるので、サービスページのUsageなどを確認して楽しんで下さい。
また、もしドラッグ＆ドロップする部分のデザインをカスタマイズしたい場合はオプションのpreviewTemplateを使ってpreviewTemplate:'<div>hogehoge</div>'のように指定してオリジナルのデザインに変更出来ます。
他にもアップロード終了後のイベント取得や色々オプションがあるので、サービスページのUsageなどを確認して楽しんで下さい。
プラグインへ一言
これでファイルアップロードも楽しくなるね
このプラグインにビビっときたらシェア
