差分

このページの2つのバージョン間の差分を表示します。

--- プログラム言語:javascript_jquery:dropzonejs:複数dropzoneのやり方 [2018/11/02 16:47]
yusuke_komori
+++ プログラム言語:javascript_jquery:dropzonejs:複数dropzoneのやり方 [2018/11/05 17:59] (現在)
yusuke_komori [up.php]
@@ 行 3: / 行 3: @@
 <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 {
+li.dz {
     display: inline-block;
     margin:10px;
@@ 行 18: / 行 19: @@
 <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">
@@ 行 23: / 行 27: @@
         </li>
         <li id="dz-content" class="dz" data-name="content">
+            dropzone
+        </li>
+        <li id="dz-memo" class="dz" data-name="memo">
             dropzone
         </li>
@@ 行 28: / 行 35: @@
 </form>
 <script>
-var myDropzone = {};
+Dropzone.autoDiscover = false;
 $('.dz').each(function(i, elem) {
-    id = i + 1;
+  $('#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 = {};
-    console.log(id + ': ' + $(elem).data('name'));
+      $.each($(elem).data(), function(j, data) {
+        postData[j] = data;
+      });
-    myDropzone[id] = new Dropzone('#dz-' + $(elem).data('name'), {
+      $.ajax({
-        url: 'up.php',
+        url: 'remove.php',
-        paramName: $(elem).data('name'),
+        type: 'post',
-        maxFiles: 1,
+        data: postData,
-        maxfilesexceeded: function(file) {
+        cache: false,
-            alert('No more files please!');
+        complete: function() {
-            this.removeFile(file);
+          $('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>
@@ 行 49: / 行 96: @@
 </html>
 </code>
+===== up.php =====
+<code>
+<?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);
+*/
+</code>

ゆーものメモ帳

ユーザ用ツール

サイト用ツール

差分

ページ用ツール