使用 Dropzone.js 的非 ajax 帖子

Question

我想知道是否有任何方法可以使 Dropzone.js (http://dropzonejs.com) 与标准浏览器 POST 而不是 AJAX 一起工作。

在提交之前将输入 type=file 注入 DOM 的某种方式可能吗？

Answer 1

没有。出于安全原因，您不能手动设置 <input type='file'> 的值。当您使用 Javascript 拖放功能时，您完全超越了文件输入。从用户的计算机中获取文件后，将文件提交到服务器的唯一方法是通过 AJAX。

解决方法：您可以改为序列化文件或以其他方式对其进行字符串化并将其作为字符串附加到表单中，然后在服务器端对其进行反序列化。

var base64Image;
var reader  = new FileReader();
reader.addEventListener("load", function () {
    base64Image = reader.result;
    // append the base64 encoded image to a form and submit
}, false);
reader.readAsDataURL(file);

也许您使用 dropzone.js 是因为文件输入很难看且难以设置样式？如果是这种情况，这个Dropzone.js alternative 可能对你有用。它允许您创建可以与表单一起提交的自定义样式输入。它也支持拖放，但是通过拖放，您无法以您想要的方式提交表单。 免责声明：我是上述库的作者。

Answer 2

所以，如果我理解正确，您想在提交您的已激活 dropzone 的表单之前附加一些数据（输入 = 文件），对吗？

如果是这样，我必须做几乎相同的事情，我通过监听事件得到它。如果你只上传一个文件，你应该听“sending”事件，但如果你想启用多个上传，你应该听“sendingmultiple”。这是我用来完成这项工作的一段代码：

Dropzone.options.myAwesomeForm = {
  acceptedFiles: "image/*",
  autoProcessQueue: false,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,

  init: function() {
    var myDropzone = this;

    [..some code..]

    this.on("sendingmultiple", function(files, xhr, formData) {
      var attaches = $("input[type=file]").filter(function (){
        return this.files.length > 0;
      });

      var numAttaches = attaches.length;

      if( numAttaches > 0 ) {
        for(var i = 0; i < numAttaches; i++){  
          formData.append(attaches[i].name, attaches[i].files[0]);
          $(attaches[i]).remove();
        }
      }
    });

    [..some more code..]

  }
}

就是这样。希望对您有所帮助:)

PS：如果有任何语法错误，但英语不是我的母语，请见谅

Answer 3

对于未来的访客 我已将此添加到 dropzone 选项中：

addedfile: function (file) {
            var _this = this,
                    attachmentsInputContainer = $('#attachment_images');
            file.previewElement = Dropzone.createElement(this.options.previewTemplate);
            file.previewTemplate = file.previewElement;
            this.previewsContainer.appendChild(file.previewElement);
            file.previewElement.querySelector("[data-dz-name]").textContent = file.name;
            file.previewElement.querySelector("[data-dz-size]").innerHTML = this.filesize(file.size);
            if (this.options.addRemoveLinks) {
                file._removeLink = Dropzone.createElement("<a class=\"dz-remove\" href=\"javascript:undefined;\">" + this.options.dictRemoveFile + "</a>");
                file._removeLink.addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    if (file.status === Dropzone.UPLOADING) {
                        return Dropzone.confirm(_this.options.dictCancelUploadConfirmation, function () {
                            return _this.removeFile(file);
                        });
                    } else {
                        if (_this.options.dictRemoveFileConfirmation) {
                            return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function () {
                                return _this.removeFile(file);
                            });
                        } else {
                            return _this.removeFile(file);
                        }
                    }
                });
                file.previewElement.appendChild(file._removeLink);
            }
            attachmentsInputContainer.find('input').remove();
            attachmentsInputContainer.append(Dropzone.instances[0].hiddenFileInput).find('input').attr('name', 'files');
            return this._updateMaxFilesReachedClass();
        },

这是 dropzone 的 addedfile 选项的默认实现，包含 3 次插入。

声明的变量attachmentsInputContainer。这是隐形方块。像

<div id="attachment_images" style="display:none;"></div>

我在这里存储带有所选图像的未来输入 然后在函数末尾从块中删除先前添加的输入（如果有）并添加新的

attachmentsInputContainer.find('input').remove();
attachmentsInputContainer.append(Dropzone.instances[0].hiddenFileInput).find('input').attr('name', 'files');

现在，当您通过简单的提交按钮发送表单时，将发送带有值的 input[name="files"]。

我做了这个 hack 因为我将文件附加到可能尚未创建的帖子

Answer 4

这是我在过去的项目中使用的，

function makeDroppable(element, callback) {

var input = document.createElement('input');

input.setAttribute('type', 'file');

input.setAttribute('multiple', true);

input.style.display = 'none';

input.addEventListener('change', triggerCallback);

element.appendChild(input);

element.addEventListener('dragover', function(e) {

e.preventDefault();

e.stopPropagation();

element.classList.add('dragover');
});

element.addEventListener('dragleave', function(e) {

e.preventDefault();

e.stopPropagation();

element.classList.remove('dragover');
});

element.addEventListener('drop', function(e) {

e.preventDefault();

e.stopPropagation();

element.classList.remove('dragover');

triggerCallback(e);
});

element.addEventListener('click', function() {
input.value = null;
input.click();
});

function triggerCallback(e) {

  var files;

  if(e.dataTransfer) {

  files = e.dataTransfer.files;

} else if(e.target) {

  files = e.target.files;
}
callback.call(null, files);
}
}