dropzone_jsプラグインのデモページ

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

2014.12.13   18746


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

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

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

dropzone.jsのデモ


dropzone.jsのページ


dropzone.jsの使い方

それではdropzone.jsの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<div id="my-awesome-dropzone" class="dropzone"></div>

CSSコード

<link rel="stylesheet" href="./css/dropzone.css">
<style>
<!-- なぜかアップロードしたサムネイルがずれるので補足 -->
.dz-details img{
    position:absolute;
    top:0;
    left:0;
}
</style>

JavaScriptコード

// jQuery本体
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// dropzone.js本体
<script src="dropzone.min.js"></script>
<script>
$(function(){

    // 何かの値をPostしたいなら
    var hogeParam = "hoge";

    // おまじない
    Dropzone.autoDiscover = false;

    Dropzone.options.myAwesomeDropzone = {
        paramName : "file",         // input fileの名前
        parallelUploads:1,            // 1度に何ファイルずつアップロードするか
        acceptedFiles:'image/*',   // 画像だけアップロードしたい場合
        maxFiles:10,                      // 1度にアップロード出来るファイルの数
        maxFilesize:0.5,                // 1つのファイルの最大サイズ(1=1M)
        dictFileTooBig: "ファイルが大きすぎます。 ({{filesize}}MiB). 最大サイズ: {{maxFilesize}}MiB.",
        dictInvalidFileType: "画像ファイル以外です。",
        dictMaxFilesExceeded: "一度にアップロード出来るのは10ファイルまでです。",
    };
    // urlは実際に画像をアップロードさせるURLパスを入れる
    var myDropzone = new Dropzone("div#my-awesome-dropzone",{url:"my_api_upload_img.php"});
    // 何か値をpostしたい場合
    myDropzone.on("sending", function(file,xhr,formData) {
        formData.append("hoge", hogeParam);
    });
});
</script>

サーバ側コード

<?php 

require_once("aws.phar");

use AwsS3S3Client;
use AwsCommonEnumRegion;
use AwsS3ExceptionS3Exception;
use AwsCommonAws;
use AwsS3EnumCannedAcl;
use GuzzleHttpEntityBody;

$hogeParam = $_POST['hoge'];

// S3クライアント作成
$client = S3Client::factory(array(
    'key' => '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

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