TOP
»
FORM
»
INPUT
»
【jQuery】ドラッグ＆ドロップでアップロード！dropzone.js

【jQuery】ドラッグ＆ドロップでアップロード！dropzone.js

2014.12.13 26025

今更ながらのdropzone.jsプラグインですが、今やファイルアップロードではドラッグ＆ドロップが必須ですので念のため紹介しておきます。ちなみにサンプルコードはAWSのS3のアップロードにしています。
是非デモで動きを確認してみてくださいね。デモは実際には画像を保存するようにしていないので安心して下さい。

dropzone.jsのオススメ/ポイント

ドラッグ＆ドロップ系ファイルアップロードプラグインの先駆け的存在
デフォルトのデザインが既に良い
複数ファイルアップロードも可能

dropzone.jsのデモ

まずはここからフル画面で見てみよう

dropzone.jsのページ

dropzone.jsサイトページ
dropzone.jsダウンロードページ（GitHub）

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などを確認して楽しんで下さい。