使用Dropzone.js的非ajax帖子

Question

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

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

Answer 1

不可以<input type='file'>。出于安全原因，您不能手动设置 a 的值。当您使用 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 替代方案可能适合你。它允许您创建可以与表单一起提交的自定义样式的输入。它也支持拖放，但通过拖放，您无法以您想要的方式提交表单。免责声明：我是上述图书馆的作者。

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：抱歉，如果有任何语法错误，但英语不是我的母语