Dropzone.jsで複数画像をアップロード

Dropzone.jsで複数画像をアップロードしたかったが、

なかなかいい記事が見つからなかったので、自分のやったことをメモ。

<HTML側>

<form action="upload.php" class="dropzone" id="my-dropzone"></form>

※multiple とか enctype="multipart/form-data"とか書いてあるサンプルがあるが、

必要ない

 

<Dropzone.js側>

uploadMultiple: true,
paramName: "file[]",

この2つのパラメーターに注意し、上記のように設定しておく

※Dropzone.jsの公式サイトをみると、paramName:true のような書き方がしてあるが、

それでは駄目。

※parallelUploadsは、特に関係がないみたい。この数を越えた数を一気にアップロードしてみたが、処理が2回に分けられるだけで、問題なくアップされた。

ただし、ソースは見ていない。

 

PHP側>

for ($i=0; $i<count($_FILES['file']['name']); $i++) {
$tempFile = $_FILES['file']['tmp_name'][$i][$i];
@list($file_name,$file_type) = explode(".",@$_FILES['file']['name'][$i][$i]);
$savename = date("YmdHis").'_'.$i.'.'.$file_type;
$targetFile = $user_dir.'/'.$savename;
move_uploaded_file($tempFile,$targetFile);
}

※私は、サーバーに保存する際、ファイル名を変えたかったので、

上記のような処理にした。

ファイル名を変える必要がなければ、@listとか不要になる。

$_FILES[file][name]をデバッグすると、以下のような感じで送られてきていた。

$_FILES[file][name]=Array
(
[0] => Array
(
[0] => test1.jpg
)
 
[1] => Array
(
[1] => test2.jpg
)
 
[2] => Array
(
[2] => test3.jpg
)
 
[3] => Array
(
[3] => test4.jpg
)
 
)

 

PHPからの処理を受けるjs側>

Dropzone.options.myDropzone = {
init: function() {
thisDropzone = this;
this.on("successmultiple", function(file, savename){
ここにアップロード完了時の処理を書く
}
}
}

 

 ※multipleがfalseの場合、処理完了時は、this.on("success") のところに書くが、

multiple:true の場合は、this.on("successmultiple") のところに書く。

※functionの引数の、savename のところは、upload.php からecho で返されたものが入る。

 

以上