如何通过Ajax发送表单数据和Dropzone文件? [英] How to send form data along with dropzone files through ajax?

问题描述

我是jquery和dropzone的新手.

I am new in jquery and dropzone.

我有一个与dropzone.js相关的问题.我必须发送表格数据(例如custome_name，id，DOB等)以及放在dropzone中的图像文件.

I have a issue related to dropzone.js. I have to send the form data (like custome_name, id, DOB etc.) along with image files dropped in dropzone.

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

How can I send my data string along with dropzone files on single click button event using AJAX to the PHP script?

先谢谢了.您的小小的支持将非常可观.

Thanks in advance. Your little support will be highly appreciable.

推荐答案

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

I'm coming late but if there is someone with the same problem, I solved it quite differently.

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

I only use dropzone for the UX for the user, and give the drag and drop function to my site, but I wanted to submit all the information at once in a single button.

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

First I initialize my dropzone area, in my case I used a div, not a form to contain the 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允许您访问每个图像的编译数据，并将其添加到我的阵列图像.

Then I declared and array (this is the way I expect to recieve it in my controller and model) extracted all the files in my save function, dropzone allow you to access its compiled data for each image, and added it to my array images.

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

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

Last I added it to my json object.

animal.Pictures = images;

在模型的最后，我得到了我所有的信息，包括我的表单和图像的dropzone数组，这正是我所期望的.

At the end in my model I recived all my info contained my form and the dropzone array of images as I was expecting.

希望有帮助.

这篇关于如何通过Ajax发送表单数据和Dropzone文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！