【dropzone.js】drag&dropで複数up&外部サーバーに保存

使い方

【index.php（フォーム側）】

①プラグイン読み込み

$html->Add_Javascript_file[] = "jquery-1.11.1.min.js";
$html->Add_Javascript_file[] = "dropzone.min.js";

②ドロップゾーン・フォーム作成　

ドロップゾーンの指定方法は③に

<div id="Dropzone" class="dropzone">こちらに画像ファイルをドラックアンドドロップしてください。</div>
<!-- div id="FileContainer"></div -->
<form method="post" action="upload_commit.php" id="UploadForm">
</form>

 ③スクリプト記述

ドロップゾーンは赤字の部分でid,class名を書く

<script type="text/javascript">
$(function(){
 $('#Dropzone').dropzone({
 url: './image_upload.php',
 addRemoveLinks:true,
 thumbnailWidth:100,
 thumbnailHeight:100,
 uploadprogress:function(_file, _progress, _size){
 _file.previewElement.querySelector("[data-dz-uploadprogress]").style.width = "" + _progress + "%";
 },
 success:function(_file, _return, _xml){
 _file.previewElement.classList.add("dz-success");
 $.getJSON(
 './ajax_get_uploaded_files.php',
 function(data){
 $('#FileContainer').children().remove();
 $('#UploadForm').children().remove();
 //登録するもの
 $.each(data, function(key, val) {
 $('#FileContainer').append('<div class="item">' + val + '</div>');
 $('#UploadForm').append('<div class="item_wrapper">' + val + 
//ここのへんでinputなど（div等で体裁整えれます）
 '<input type="hidden" name="item_frag" value=' + key + ' />'+
 '</div><!-- .item_wrapper -->'
 );
 });
 $('#UploadForm').append('<input type="submit" value="登録" />');
 }
 );
 
 },
 error:function(_file, _error_msg){
 var ref;
 (ref = _file.previewElement) != null ? ref.parentNode.removeChild(_file.previewElement) : void 0;
 },
 removedfile:function(_file){
 var ref;
 (ref = _file.previewElement) != null ? ref.parentNode.removeChild(_file.previewElement) : void 0;
 },
 dictRemoveFile:'削除',
 dictCancelUpload:'キャンセル'
 });
});
</script>

 【注意点memo】appendする際、二行にわたって

$('#UploadForm').append('<div class="item_wrapper">' + val );
//ここに色々はいったとして
$('#UploadForm').append('</div>');

appendする際、二行にまたいでdivで囲おうとするとdivは一行目の部分で閉じられるので一回でappendすること。

================================================================

【image.upload.php（アップロード側）】

//ドロップされたアイテム毎にこのスクリプトにリクエストがきて、一つ一つが像を処理する。
$path = "/usr/local/httpd/....images/";
if (!empty($_FILES)){
 $tempname = $_FILES['file']['name'];
 $tempFile = $_FILES['file']['tmp_name'];
 $targetFile = $path. $_FILES['file']['name'];
 move_uploaded_file($tempFile,$targetFile);
 echo $tempFile;

【ajax_get_uploades_files.php（アップロードしたファイルをjsonに）】

include("./inc/JsonResponse.Class.inc");
$json = new JsonResponse();
//最初に先にアップデートされてる一時ファイルを全部削除する
$path = "/usr/local/httpd/admin/social/cc/cc_item_add/upload/";
if ($handle = opendir($path)) {
 while (false !== ($file = readdir($handle))) {
 if(!preg_match("/.gif$|.txt$|.png$/",$file)) continue;
 $uploaded_file[] = $file;
 }
 closedir($handle);
}

$json->setArray($uploaded_file);
$json->sendResponse();
exit;