文書の過去の版を表示しています。

複数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.dz {
    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 id="dz-title" class="dz" data-name="title">
            dropzone
        </li>
        <li id="dz-content" class="dz" data-name="content">
            dropzone
        </li>
        <li id="dz-memo" class="dz" data-name="memo">
            dropzone
        </li>
    </ul>
</form>
<script>
Dropzone.autoDiscover = false;

$('.dz').each(function(i, elem) {
    console.log(i + ': ' + $(elem).data('name'));
 
   $('#dz-' + $(elem).data('name')).dropzone({ 
        url: 'up.php',
        paramName: $(elem).data('name'),
        maxFiles: 1,
        maxfilesexceeded: function(file) {
            alert('アップロードできる画像は' + this.options.maxFiles + 'つです。');
            this.removeFile(file);
        },
    });
});
</script>
</body>
</html>

ゆーものメモ帳

サイドバー

複数Dropzoneのやり方

コメント

ゆーものメモ帳

ユーザ用ツール

サイト用ツール

サイドバー

複数Dropzoneのやり方

コメント

ページ用ツール