プログラム言語:javascript_jquery:dropzonejs:複数dropzoneのやり方

差分

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

この比較画面にリンクする

--- プログラム言語:javascript_jquery:dropzonejs:複数dropzoneのやり方 [2018/11/05 17:09]
yusuke_komori
+++ プログラム言語:javascript_jquery:dropzonejs:複数dropzoneのやり方 [2018/11/05 17:59] (現在)
yusuke_komori [up.php]
@@ 行 19: / 行 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">
@@ 行 35: / 行 38: @@
 $('.dz').each(function(i, elem) {
-    console.log(i + ': ' + $(elem).data('name'));
+  $('#dz-' + $(elem).data('name')).dropzone({
+    url: 'up.php',
-   $('#dz-' + $(elem).data('name')).dropzone({
+    paramName: $(elem).data('name'),
-        url: 'up.php',
+    maxFiles: 1,
-        paramName: $(elem).data('name'),
+    maxfilesexceeded: function(file) {
-        maxFiles: 1,
+      alert('アップロードできる画像は' + this.options.maxFiles + 'つです。');
-        maxfilesexceeded: function(file) {
+      this.removeFile(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>
@@ 行 51: / 行 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>

プログラム言語/javascript_jquery/dropzonejs/複数dropzoneのやり方.1541405363.txt.gz · 最終更新: 2018/11/05 17:09 by yusuke_komori