サイドバー
プログラム言語:javascript_jquery:dropzonejs:1枚制限のやり方
1枚制限のやり方
DropzoneJSにて、アップロードできるファイル数を１枚に制限するやり方。
Javascript
<html>
<head>
<meta charset="utf-8">
<script src="js/dropzone.js"></script>
<style>
div#myId {
background-color:#333;
color:#fff;
width:300px;
height:300px;
}
</style>
</head>
<body>
<form action="next.php" method="post" enctype="multipart/form-data">
<div id="myId">
dropzone
</div>
</form>
<script>
// Dropzone class:
var myDropzone = new Dropzone("div#myId", {
url: "up.php",
paramName: 'file_test',
maxFiles: 1,
maxfilesexceeded: function(file) {
alert('アップロードできる画像は' + this.options.maxFiles + 'つです。');
this.removeFile(file);
},
});
// 上はの方法は宣言時に「maxfilesexceeded」イベントの処理も設定している
// 下の方法は後から「maxfilesexceeded」イベントの処理を追加している
// myDropzone.on("maxfilesexceeded", function(file) {
// alert("No more files please!");
// this.removeFile(file);
// });
</script>
</body>
</html>
jQuery
クラスに対して、Dropzoneを指定できるので複数設定するのが楽。
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/dropzone.js"></script>
<style>
li {
display: inline-block;
margin:10px;
background-color:#333;
color:#fff;
width:300px;
height:300px;
}
</style>
</head>
<body>
<form action="next.php" method="post" enctype="multipart/form-data">
<ul>
<li class="dz">
dropzone
</li>
<li class="dz">
dropzone
</li>
</ul>
</form>
<script>
// jQuery
$(".dz").dropzone({
url: "up.php",
paramName: 'file_test',
maxFiles: 1,
maxfilesexceeded: function(file) {
alert('アップロードできる画像は' + this.options.maxFiles + 'つです。');
this.removeFile(file);
},
});
</script>
</body>
</html>
up.php（アップロード処理）
<?php
if (isset($_FILES['file_test'])) {
// アップロード処理
}
プログラム言語/javascript_jquery/dropzonejs/1枚制限のやり方.txt · 最終更新: 2018/11/05 16:39 by yusuke_komori
特に明示されていない限り、本Wikiの内容は次のライセンスに従います： CC Attribution-Share Alike 4.0 International
コメント