JavaScriptプログラムに関する各種メモ書き

ドラッグ&ドロップで複数ファイルファイルアップロード + 進捗(プログレスバー)表示する Dropzone.js

ファイルアップロードシステムを作るには Dropzone が簡単で便利です。 以下の様な特徴があります。

・jQueryを必要としない。(共存可能です。以下の例ではjQueryと併用します。)
・ドラッグ&ドロップでファイルアップロードが行える
・非同期でファイルアップロードが行える
・ファイルアップロード中の進捗バーを表示することが出来る

使い方は簡単です。

1. ファイルのダウンロード と用意

必要なファイルは

dropzone.js (ダウンロード)
dropzone_config.js (自分で作成)
dropzone_upload.php (自分で作成)
dropzone.css (自分で作成)

です。

■ dropzone.js

https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js ( .jsファイル)
からダウンロードして保存します。

■ dropzone_config.js

dropzone_config.jsは以下のように作成しておきます (※要追加) のところは適宜追加すること。

$(document).ready(function() {
$('#image_drop_area').dropzone({
    url                          : './js/dropzone_upload.php',
    paramName                    : 'file',
    maxFilesize                  : 999 , //MB
    addRemoveLinks               : true ,
    previewsContainer            : '#preview_area' ,
    thumbnailWidth               : 50 , //px
    thumbnailHeight              : 50 , //px
    dictRemoveFile               :'[×]' ,
    dictCancelUpload             :'キャンセル' ,
    dictCancelUploadConfirmation : 'アップロードをキャンセルします。よろしいですか?' ,
        uploadprogress:function(file, progress, size){
        file.previewElement.querySelector("[data-dz-uploadprogress]").style.width = "" + progress + "%";
    },
    success:function(file, rt, xml){
        // それぞれのファイルアップロードが完了した時の処理(※要追加)
        file.previewElement.classList.add("dz-success");
         $(file.previewElement).find('.dz-success-mark').show();
    },
    processing: function(){
        // ファイルアップロード中の処理(※要追加)
    } ,
    queuecomplete: function(){
        // 全てのファイルアップロードが完了した時の処理(※要追加)
    } ,
    dragover: function( arg ){
        $('#' + arg.srcElement.id).addClass('dragover');
    } ,
    dragleave: function( arg ){
        $('#' + arg.srcElement.id).removeClass('dragover');
    } ,
    drop: function( arg ){
        $('#' + arg.srcElement.id).removeClass('dragover');
    } ,
    error:function(file, _error_msg){
        var ref;
        (ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
    },
    removedfile:function(file){
        delete_hidden('dropzone_files[]',file.xhr.response);
        var ref;
        (ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
    } ,
    canceled:function(arg){
    } ,
    previewTemplate : "\
    <div class=\"dz-preview dz-file-preview\">\n\
      <div class=\"dz-details\">\n\
        <div class=\"clearfix\">\n\
          <img class=\"dz-thumbnail\" data-dz-thumbnail>\n\
          <div class=\"dz-success-mark\" style=\"display:none;\"><i class=\"fa fa-2x fa-check-circle\"></i></div>\n\
        </div>\n\
        <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n\
        <div>\n\
          <div class=\"dz-filename\"><span data-dz-name></span></div>\n\
          <div class=\"dz-my-separator\"> / </div>\n\
          <div class=\"dz-size\" data-dz-size></div>\n\
          <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n\
        </div>\n\
      </div>\n\
    </div>\n\
    "
});
});

■ dropzone_upload.php

dropzone_upload.phpは以下のように作成しておきます

<?php
$ds = DIRECTORY_SEPARATOR;
$store_folder = dirname(__FILE__) . $ds . '..' . $ds . 'data' . $ds . 'tmp' . $ds;
// echo $store_folder;
if (!empty($_FILES)) {
    $temp_file = $_FILES['file']['tmp_name'];
    $ext = get_ext($_FILES['file']['name']);    // ファイル名から拡張子を取得
    $target_file = basename($_FILES['file']['tmp_name'].$ext);
    $ja_file     = $_FILES['file']['name'];
    $target_file_fullpath =  $store_folder . $target_file;
    move_uploaded_file($temp_file, $target_file_fullpath);
    echo "{$target_file}\t{$ja_file}";      // 英語ファイル名[TAB]日本語ファイル名 を返す
}

//========== _get_ext mime-typeを調べて拡張子を返す
function get_ext($file_name){
    $p = pathinfo($file_name);
    if ( isset($p['extension']) ){
        return '.'.$p['extension'];
    }
    else{
        return '';
    }
}

■ dropzone.css

dropzone.cssは以下のように作成しておきます

#image_drop_area {
    text-align: center;
    padding: 20px 0;
    height: 70px;
    width: 100%;
    color: #666;
    background-color: #f9f9f9;
    border: 4px dotted #bbb;
}
.dragover {
    color: #111               !important;
    background-color: #f1f1f1 !important;
    border: 4px dotted #777   !important;
}
.dz-preview {
    margin: 5px 0;
    padding: 10px;
    float: left;
    background-color: #F5F5F5;
    border-radius: 5px;
}
.dz-details {
    padding: 0;
}
.dz-filename , .dz-size, .dz-my-separator , .dz-remove {
    font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
}
.dz-filename , .dz-my-separator, .dz-size , .dz-error-message {
    float: left;
}
.dz-my-separator {
    width: 20px;
    text-align: center;
}
.dz-size {
    margin-top: 1px;
}
.dz-progress {
    width: 500px;
}
.dz-progress .dz-upload {
    display: block;
    border: 5px solid #1E9BFF;
    border-radius: 2px;
}
.dz-remove {
    float: left;
    margin-left: 5px;
}
.dz-thumbnail {
    margin-bottom: 3px;
}
.fa-check-circle:before {
    color: #93C54B;
}
.dz-thumbnail , .dz-success-mark {
    display: block;
    float: left;
}
.dz-success-mark {
    height: 25px;
    margin-left: 5px;
}

2. htmlファイルからdropzoneを読み込み

(formタグのactionは dropzone_upload.phpである必要はありません。通常のフォーム送信CGIでOKです。)

<html>
<head>
<meta charset="UTF-8">
<title>dropzone test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dropzone.js"></script>
<script src="dropzone_config.js"></script>
<link href="dropzone.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form action="XXXXXX.XXX">
    <div id="image_drop_area" >ここにアップロードファイルをドロップ</div>
    <div id="preview_area" class="dropzone-custom"></div>
</form>
</body>
</html>

以上です。


関連エントリー

No.982
01/22 23:37

edit

HTML5
フォーム
jQuery
Ajax
画像