Question

我正在以我的表格合并Dropzone，其中包含其他数据。对于创建过程，它运行良好。可以将图像拖放到Dropzone框中，然后单击“ Save_button”，图像将与其余表单数据一起提交。

我还在编辑过程中使用了同一页面，以允许用户编辑提交的图像和其他相关数据。通过下面的代码块“阻止上传的图像”，将上传的图像拉出并显示在Dropzone中。

这里出现问题。如果用户未在Dropzone中添加任何新图像，则单击“ Save_button”不会使该表单上载！我认为processQueue不执行任何操作，因为图像队列为空，因此不提交表单。

问题：有没有办法强制提交表格？例如，触发“ sendingmultiple”事件，以便可以提交其他表单数据？

Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop images here to upload<br>(.jpg, .jpeg, .gif, .png)";

Dropzone.options.myDropzone = {
url: '/addpage',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: '.png,.jpg,.jpeg,.gif',
addRemoveLinks: true,
init: function () {
   dzClosure = this;
   myDropzone1 = this;

   //Block with uploaded images, start
   var imagesList = ["http://www/path/to//image1.jpg"]
   
   for (var i = 0; i < imagesList.length; i++) {
       var mockFile = { id: i, name: "Image " + i, filename: imagesList[i], size: 1, type: "image/jpg", status: Dropzone.QUEUED, accepted: true, upload: {} };
       myDropzone1.emit("addedfile", mockFile);

       myDropzone1.createThumbnailFromUrl(mockFile, imagesList[i], "", "");
       myDropzone1.files.push(mockFile);
       myDropzone1.emit("complete", mockFile);
   }
   //Block with uploaded images, end

   document.getElementById("Save_button").addEventListener("click", function (e) {

       e.preventDefault();
       e.stopPropagation();

       var success = true;

       if (!someFormValuesValidation())
           success = false;

       if (!success) {
           alert("Form validation failed, please check values.");
           return false;
       }
       else {
           dzClosure.processQueue();
       }
   });

   this.on("sendingmultiple", function (data, xhr, formData) {
       $('#loading').show();

       formData.append("Title", jQuery("#Title").val());
       formData.append("Price", jQuery("#Price").val());
       formData.append("Quantity", jQuery("#Quantity").val());
   });

   this.on("successmultiple", function (file, result) {
       if (result.Response == "0") {
           alert("Success!");
       } else {
           alert("There is a problem: " + result.Error);
       }
       file.status = Dropzone.QUEUED;
       myDropzone1.status = Dropzone.QUEUED;

       $('#loading').hide();
   });

   this.on("maxfilesexceeded", function (file) {
       this.removeFile(file);
       alert("Can't add more images. Maximum only 5 images");
   });

}
}

<form action="/addpage" autocomplete="off" id="Form" method="post" enctype="multipart/form-data">
<div class="dropzone" id="my-dropzone">
    <div class="fallback">
    <input name="Images" type="file" multiple />
    </div>
</div>
<button type="button" class="save-btn" id="Save_button">Save</button>
</form>

Answer 1

我认为processQueue不会执行任何操作，因为图像队列是为空，因此不提交表单。

是的，队列确实为空-在浏览器控制台上运行console.log( myDropzone1.getQueuedFiles() )，您会得到一个空数组（[]）。

有没有办法强制提交表格？

在您的mockFile中，将status设置为Dropzone.QUEUED：

var mockFile = { ..., status: Dropzone.QUEUED, ... };

mockFile需要有一个upload项，可以像这样简单地变成{}：

var mockFile = { ..., status: Dropzone.QUEUED, accepted: true, upload: {} };

更新

上一个答案实际上是为了使表单可以简单提交而没有二进制图像数据，即QUEUED状态和{{1} }项目仅用于使“保存”按钮起作用。

但是，如果您实际上打算上传回upload数组中的所有图像，那么imagesList应该是有效的File对象/实例，而我会使用{{1 }}，将文件添加到Dropzone。

因此，您的mockFile循环可能很简单：

Dropzone.prototype.addFile()

Answer 2

感谢您的帮助，从这里的想法中，我构建了以下对我有用的解决方案：

$.get(
  'attachments/actions/fetch-attachments.php',
  {
    parentdirectory: $fromparentdirectory,
    directory: $fromdirectory,
  },
  function (data) {
    var $files = [];
    $.each(data, function (key, row) {
      $files.push({
        name: row.name,
        size: row.size,
        dir: row.dir,
      });
    });

    if ($files) {
      for (var i = 0; i < $files.length; i++) {
        let mockFile = {
          name: $files[i].name,
          size: $files[i].size,
          dataURL: $fromparentdirectory + $fromdirectory + $files[i].name,
          status: Dropzone.QUEUED,
          accepted: true,
          upload: {},
        };

        var ext = $files[i].name.split('.')[1];
        if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
          var thumbnail = 'attachments/file.png';
        } else {
          var thumbnail = $fromparentdirectory + $fromdirectory + $files[i].name;
        }

        let name = $files[i];
        name = $files[i].dir + $files[i].name;

        console.log(name);

        fetch(name)
          .then((res) => res.blob())
          .then((blob) => {
            let file = new File([blob], name, blob);
            thisDropzone.addFile(file);
          });
      }
    }
  },
);

没有将新图像添加到Dropzone时processQueue不起作用

2 个答案:

更新