在每个文件上传时使用 dropzone.js 发送自定义数据

Posted 2023-02-24

【中文标题】在每个文件上传时使用 dropzone.js 发送自定义数据

【英文标题】：Send custom data with dropzone.js on each File Upload

【发布时间】：2015-05-18 09:26:26

【问题描述】：

我在我的 Code Igniter 项目中使用 dropzone。

每次拖动文件时，dropzone 都会创建一个 ajax 请求，并且我的文件也会存储在服务器上。但是现在，我的要求是我想在文件旁边发送额外的数据（DYNAMIC）。 使用params，只能发送静态数据，但我要发送的数据每次都会变化。

这就是我的代码的样子：

<script>
 Dropzone.autoDiscover = false;
  Dropzone.options.attachment = 
        init: function()
          this.on('removedfile',function(file)
            // console.log('akjsdhaksj');
            var fileName = file.name;
            $.ajax(
              type: 'POST',
              url: "<?php echo BASE_URL.'index.php/admin/mail_actions/deleteFile' ?>",
              data: "id="+fileName,
              dataType: 'html'
            );
          );
        ,
        // params: 
        // customerFolder: $('#toValue').substr(0, toValue.indexOf('@')),
        // ,
        dictDefaultMessage:"Click / Drop here to upload files",
        addRemoveLinks: true,
        dictRemoveFile:"Remove",
        maxFiles:3,
        maxFilesize:8,
  

$(function()

  var uploadFilePath = "<?php echo BASE_URL.'index.php/admin/mail_actions/uploadFile' ?>";
  var myDropzone     = new Dropzone("div#attachment",  url: uploadFilePath);

);
</script>

我能做到吗？

【参考方案1】：

我明白了。 这是我必须使用的

myDropzone.on('sending', function(file, xhr, formData)
    formData.append('userName', 'bob');
);

【讨论】：

我试过用这个但没有运气..在哪里添加这个代码？在初始化？

你是如何定义你的dropzone的？没有 sn-p 很难回答。创建小提琴

它正在发送但不了解它的发送方式。Content-Disposition: form-data; name="name" sss 内容处置：表单数据；名称="描述"

尝试在创建dropzone instance时去掉sending方法，使用on绑定发送方法

什么是用户名和鲍勃？这些是表单字段吗？

【参考方案2】：

Abhinav 有正确且有效的答案我只想提供第二个选项以在选项对象中使用它（例如，如果您在一页上有多个 Dropzone 部分。）

myDropzone.options.dropzoneDivID = 
    sending: function(file, xhr, formData)
        formData.append('userName', 'Bob');
    
;

【讨论】：

我给你的答案投了赞成票，因为它表明实现此功能的方法不止一种

如何将 dropzone 外的变量添加到表单数据追加中？

【参考方案3】：

如果您有嵌套的有效负载对象 - 例如给你的文件添加一个名字，你的 api 只接受这样的东西

    someParameter: 
        image: <my-upload-file>,
        name: 'Bob'
    

您的 dropzone 设置如下所示

var myDropzone     = new Dropzone("div#attachment",  
    url: uploadFilePath,
    paramName: 'someParameter[image]'
);

myDropzone.on('sending', function(file, xhr, formData)
    formData.append('someParameter[image]', file);
    formData.append('someParameter[userName]', 'bob');
);

我只添加了这个，因为从现在起没有记录嵌套参数的示例。

【参考方案4】：

我使用的是 JQuery，这就是我的工作方式：

           $("#dZUpload").dropzone(
                url: "ajax/upload_img_ben.php",
                success: function (file, response) 
                    var imgName = response;
                    file.previewElement.classList.add("dz-success");
                    console.log("Successfully uploaded :" + imgName);
                ,
                error: function (file, response) 
                    file.previewElement.classList.add("dz-error");
                ,
                sending: function(file, xhr, formData)
                    formData.append('id', '5');
                
            );