【jQuery】ドラッグ&ドロップでアップロード!dropzone.js

2014.12.13   26025


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

プラグインへ一言

これでファイルアップロードも楽しくなるね

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております