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


How to send form data along with dropzone files through ajax?

我是jquery和dropzone的新手。

我有一个与dropzone.js有关的问题。我必须发送表单数据(如custome_name、id、DOB等)以及在dropzone中丢弃的图像文件。

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

提前谢谢。你的小小支持将是非常可观的。

根据Dropzone.js文档的提示部分,

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方法将如何工作。

我来晚了,但如果有人有同样的问题,我会以完全不同的方式解决。

我只为用户的用户体验使用dropzone,并为我的网站提供拖放功能,但我想在一个按钮中一次性提交所有信息。

首先,我初始化了我的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数组。

希望能有所帮助。