画像をドラッグ&ドロップでアップロードする方法

2015/04/15

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にdropzoneのことをメモっていたけど、もうちょっと突っ込んだ使い方のメモ。

■ダウンロード先

http://www.dropzonejs.com/

※ページ内で「download」で検索すると見つかりやすい。

■使い方

画像を送信するページ

<html>
<head>
<style>
div#file{ /* dropzoneの表示エリア */
	width:200px;
	height:100px;
	border:1px solid #000;
	padding: 10px;
}
img.previewImg{ /* サムネイルサイズ */
	width: 100px;
	height: 100px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./dropzone.js"></script>
<script type="text/javascript">
$(function(){
	Dropzone.options.file = {
		paramName : "file"	//受信側の$_FILESのキー
		, dragover : function(e){	//ドロップ時の処理
			$("div#file").css("background-color", "#f0f0f0");
		}
		, dragleave : function(e){	//ドロップが外れた場合の処理
			$("div#file").css("background-color", "#ffffff");
		}
		, success : function(file, responseText, e) {	//アップロード成功時
			console.log(responseText);	//PHPでecho出力したものを持ってこられる
			$('div.preview').append('画像名:'+responseText+'<br><img src="./img/'+responseText+'" class="previewImg"><br>');	//アップロードしたものサンプル表示
		}
		, previewTemplate : '<span></span>'	//デフォでアップロードした画像が表示される部分を非表示
	};
	var myDropzone = new Dropzone("div#file", { url: "upload.php"});
});
</script>

</head>
<body>

	<div id="file">
		画像をここにドラッグするか、クリックして画像を選択して下さい。
	</div>

	<div class="preview">
		<!--アップロードした画像はここにサムネイル表示される-->
	</div>

</body>
</html>

<html>

<head>

<style>

div#file{ /* dropzoneの表示エリア */

width:200px;

height:100px;

border:1px solid #000;

padding: 10px;

}

img.previewImg{ /* サムネイルサイズ */

width: 100px;

height: 100px;

}

</style>

$(function(){

Dropzone.options.file = {

paramName : "file" //受信側の$_FILESのキー

, dragover : function(e){ //ドロップ時の処理

$("div#file").css("background-color", "#f0f0f0");

}

, dragleave : function(e){ //ドロップが外れた場合の処理

$("div#file").css("background-color", "#ffffff");

}

, success : function(file, responseText, e) { //アップロード成功時

console.log(responseText); //PHPでecho出力したものを持ってこられる

$('div.preview').append('画像名:'+responseText+'<br><img src="./img/'+responseText+'" class="previewImg"><br>'); //アップロードしたものサンプル表示

}

, previewTemplate : '<span></span>' //デフォでアップロードした画像が表示される部分を非表示

};

var myDropzone = new Dropzone("div#file", { url: "upload.php"});

});

</script>

</head>

<body>

画像をここにドラッグするか、クリックして画像を選択して下さい。

</div>

</div>

</body>

</html>

画像を受信してディレクトリにアップロードするページ

<?php
define('FILE_PATH','./img/'); //ファイルパスを指定
$imgKey = 'file'; //ファイルのキー

if( !is_uploaded_file( $_FILES[$imgKey]['tmp_name']) ){
	echo 0;
	exit();
} else {
	//拡張子チェック
	$tmpExt = $_FILES[$imgKey]['type'];
	if ($tmpExt == 'image/jpeg' || $tmpExt == 'image/jpg') $imgExt = '.jpg';
	else if ($imgExt == 'image/png') $imgExt = '.png';
	else if ($imgExt == 'image/gif') $imgExt = '.gif';

	//ファイル名を「ランダム英数字.拡張子」で設定
	$img = md5(uniqid(rand(), true)) . $imgExt;

	move_uploaded_file($_FILES["file"]["tmp_name"], FILE_PATH . $img );
	echo $img;
}

<?php

define('FILE_PATH','./img/'); //ファイルパスを指定

$imgKey = 'file'; //ファイルのキー

if( !is_uploaded_file( $_FILES[$imgKey]['tmp_name']) ){

echo 0;

exit();

} else {

//拡張子チェック

$tmpExt = $_FILES[$imgKey]['type'];

if ($tmpExt == 'image/jpeg' || $tmpExt == 'image/jpg') $imgExt = '.jpg';

else if ($imgExt == 'image/png') $imgExt = '.png';

else if ($imgExt == 'image/gif') $imgExt = '.gif';

//ファイル名を「ランダム英数字.拡張子」で設定

$img = md5(uniqid(rand(), true)) . $imgExt;

move_uploaded_file($_FILES["file"]["tmp_name"], FILE_PATH . $img );

echo $img;

}

■その他

・ある程度のブラウザで使えそう

以前はIEのバージョンの問題で使用を見送ったけど、サポートされているIEのバージョンが10以上で、今の最新が11(公開日が2013/10/17)なので、そろそろ使っても大丈夫そう。

また、複数アップロードも対応しているのがありがたい。

・画像と一緒にデータも送りたい

例えばユーザIDみたいなものを送って、受信側で「ユーザID,画像名」をデータベースに残したい、みたいなことがあったとする。その場合はdropzoneの部分をformにしてinput=hiddenで送信するとよい。詳しくは以下のような形。

<html>
<head>
<style>
form#file{ /* dropzoneの表示エリア */
	width:200px;
	height:100px;
	border:1px solid #000;
	padding: 10px;
}
img.previewImg{ /* サムネイルサイズ */
	width: 100px;
	height: 100px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./dropzone.js"></script>
<script type="text/javascript">
$(function(){
	Dropzone.options.file = {
		paramName : "file"	//受信側の$_FILESのキー
		, dragover : function(e){	//ドロップ時の処理
			$("form#file").css("background-color", "#f0f0f0");
		}
		, dragleave : function(e){	//ドロップが外れた場合の処理
			$("form#file").css("background-color", "#ffffff");
		}
		, success : function(file, responseText, e) {	//アップロード成功時
			console.log(responseText);	//PHPでecho出力したものを持ってこられる
			$('div.preview').append('画像名:'+responseText+'<br><img src="./img/'+responseText+'" class="previewImg"><br>');	//アップロードしたものサンプル表示
		}
		, previewTemplate : '<span></span>'	//デフォでアップロードした画像が表示される部分を非表示
	};
	var myDropzone = new Dropzone("form#file", { url: "upload.php"});
});
</script>

</head>
<body>
	<form id="file" method="post">
		<input type="hidden" name="testid" value="11111"><!--キーがtestid、値が11111を送る場合-->
		画像をここにドラッグするか、クリックして画像を選択して下さい。
	</form>

	<div class="preview">
		<!--アップロードした画像はここにサムネイル表示される-->
	</div>

</body>
</html>

<html>

<head>

<style>

form#file{ /* dropzoneの表示エリア */

width:200px;

height:100px;

border:1px solid #000;

padding: 10px;

}

img.previewImg{ /* サムネイルサイズ */

width: 100px;

height: 100px;

}

</style>

$(function(){

Dropzone.options.file = {

paramName : "file" //受信側の$_FILESのキー

, dragover : function(e){ //ドロップ時の処理

$("form#file").css("background-color", "#f0f0f0");

}

, dragleave : function(e){ //ドロップが外れた場合の処理

$("form#file").css("background-color", "#ffffff");

}

, success : function(file, responseText, e) { //アップロード成功時

console.log(responseText); //PHPでecho出力したものを持ってこられる

$('div.preview').append('画像名:'+responseText+'<br><img src="./img/'+responseText+'" class="previewImg"><br>'); //アップロードしたものサンプル表示

}

, previewTemplate : '<span></span>' //デフォでアップロードした画像が表示される部分を非表示

};

var myDropzone = new Dropzone("form#file", { url: "upload.php"});

});

</script>

</head>

<body>

画像をここにドラッグするか、クリックして画像を選択して下さい。

</form>

</div>

</body>

</html>

dropzoneのオプション部分で決められるとスマートなんだけど、ちょっと見当たらなかった。

- jQuery

: jQueryで関数処理中にブラウザのブロック(intro.js)

Ajaxで処理を行っている間、他の処理を行わせたくなかった。「now load ...

: jQueryプラグインを作成する方法

jQueryのプラグインを作ってみたかった。というのも大抵のものはググったらあ ...

: Ajaxで画像のアップロード(jquery.upload)

業務中に画像の選択後、アップロードボタンを押して画像のアップ、その後フォームの ...

: スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...

: FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...

: jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...

: jQueryでimgタグのsrcを変える

やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...

: スクロールしてもついてくる追尾型の広告を作る方法

スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...

: getElementsByTagName

うろ覚えだけど業務中に、 document.getElementById('aa ...

: Ajaxで負荷軽減

業務中、専用のページでfile_get_contents的なものはあまり使わな ...

PREV: html内に動画を埋め込んで配信する方法
NEXT: 画像の一部分のみリンクを設定する方法

画像をドラッグ&ドロップでアップロードする方法

関連記事