複数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">
    <input type="hidden" name="file_title">
    <input type="hidden" name="file_content">
    <input type="hidden" name="file_memo">
    <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) {
  $('#dz-' + $(elem).data('name')).dropzone({ 
    url: 'up.php',
    paramName: $(elem).data('name'),
    maxFiles: 1,
    maxfilesexceeded: function(file) {
      alert('アップロードできる画像は' + this.options.maxFiles + 'つです。');
      this.removeFile(file);
    },
    dictMaxFilesExceeded: 'アップロードできる画像は{{maxFiles}}つです。',
    success: function(file, result) {
      if (result == 'error') {
        alert('画像のアップロードに失敗しました。');
        this.removeFile(file);
        return;
      }
      $('input[name=file_' + $(elem).data('name') + ']').val(result);
      if (file.previewElement) {
        return file.previewElement.classList.add('dz-success');
      }
    },
    addRemoveLinks: true,
    dictRemoveFile: 'キャンセル',
    removedfile: function(file) {
      var thisDropzone = this;
      var postData = {};

      $.each($(elem).data(), function(j, data) {
        postData[j] = data;
      });

      $.ajax({
        url: 'remove.php',
        type: 'post',
        data: postData,
        cache: false,
        complete: function() {
          $('input[name=file_' + $(elem).data('name') + ']').val('');

          var _ref;
          if (file.previewElement) {
            if ((_ref = file.previewElement) != null) {
              _ref.parentNode.removeChild(file.previewElement);
            }
          }

          return thisDropzone._updateMaxFilesReachedClass();
        },
        error: function() {
          alert('画像の削除に失敗しました。');
        }
      });
    },
  });
});
</script>
</body>
</html>

up.php

<?php
if (!isset($_FILES) || count($_FILES) == 0) {
    // エラー処理
    echo 'error';
    exit;
}

// アップロード処理

$key = key($_FILES);

echo $key . '_' . date('Ymd_His') . '.jpg';

/*
 * 配列で返したい場合は、jsonにエンコードする
$result = [
    'key' => $key,
    'name' => $key . '_' . date('Ymd_His') . '.jpg',
];

echo json_encode($result);
*/

ゆーものメモ帳

サイドバー

複数Dropzoneのやり方

up.php

コメント

ゆーものメモ帳

ユーザ用ツール

サイト用ツール

サイドバー

複数Dropzoneのやり方

up.php

コメント

ページ用ツール