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

时间:2015-03-16 09:55:58

标签: javascript php jquery codeigniter dropzone.js

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

每次拖动文件时,dropzone都会创建一个ajax请求,我的文件也会存储在服务器上。但现在,我的要求是我想在文件旁边发送其他数据( DYNAMIC )。 通过使用参数,只能发送静态数据,但我想发送的数据每次都会发生变化。

这是我的代码的外观:

<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>

无论如何我能做到吗?

4 个答案:

答案 0 :(得分:116)

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

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

答案 1 :(得分:22)

Abhinav有正确且有效的答案我只想在选项对象中提供第二个选项(例如,如果你在一个页面上有多个Dropzone部分。)

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

答案 2 :(得分:7)

如果您有嵌套的有效负载对象 - 例如为你的文件添加一个名字,你的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');
});

我只添加了这个,因为从现在开始没有记录嵌套参数的例子。

答案 3 :(得分:0)

我正在使用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');
                }
            });