目次

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'])) {
    // アップロード処理
}