Question

我是jquery和dropzone的新手。

我遇到了与dropzone.js相关的问题。我必须发送表单数据（如custome_name，id，DOB等）以及dropzone中丢弃的图像文件。

如何使用AJAX将单击按钮事件中的数据字符串与dropzone文件一起发送到PHP脚本？

提前致谢。你的小支持将非常值得赞赏。

Answer 1

根据Dropzone.js文档的tips部分，

Dropzone将提交您在dropzone表单中的任何隐藏字段

所以这可能是你的选择。或者，您也可以使用params选项指定额外数据，该选项可能类似于：

Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  params: {
    customer_name: 'Jeffrey Lebowski',
    dob: '1949-11-20',
    ...
  },
  ...
};

没有很好地记录，所以我只是猜测 Dropzone.options方法是如何工作的。

Answer 2

我来晚了，但是如果有人遇到相同的问题，我会以不同的方式解决它。

我仅将dropzone用于用户的UX，并将拖放功能提供给我的网站，但是我想一次通过一个按钮提交所有信息。

首先，我初始化我的dropzone区域，在这种情况下，我使用了div，而不是包含dropzone的表单。

 $animalImage = new Dropzone('div#animalImage', {
        // url: '/file/post',
        addRemoveLinks: true,
        //thumbnailWidth: "100",
        //thumbnailHeight: "100",
        uploadMultiple: true,
        autoProcessQueue: false,
        parallelUploads: 4,
        maxFilesize: 4,
        maxFiles: 4,
        maxfilesexceeded: function (files) {
            this.removeAllFiles();
            this.addFile(files);
        },
        acceptedFiles: '.png,.jpg,.jpeg',
        dictDefaultMessage: '<span class="text-center"><i class="fa fa-cloud-upload text-info" style="margin-right:5px"></i>' + 
            'Arrastra una imagen <span class="font-xs">para guardar</span></span><span>&nbsp&nbsp' + '<h4 class="display-inline"> (O Click Aquí)</h4></span>',
        //dictResponseError: 'Error al subir imagen',
        dictRemoveFile: '<i class="fa fa-times-circle" style="font-weight: 900; cursor:pointer;"></i>' 
    });

然后我声明并数组（这是我期望在控制器和模型中接收它的方式）提取了保存功能中的所有文件，dropzone允许您访问每个图像的编译数据，并将其添加到我的阵列图像。

images = [];
        for (var i = 0; i < $animalImage.files.length; i++) {
            images.push($animalImage.files[i]);
        }

最后，我将其添加到了json对象中。

animal.Pictures = images;

在模型的最后，我得到了我所有的信息，其中包含表单和图像的dropzone数组。

希望有帮助。

如何通过ajax发送表单数据和dropzone文件？

2 个答案: