web-dev-qa-db-fra.com

Envoi d'un paramètre supplémentaire avec dropzone.js

J'essaie d'ajouter dropzone.js et je voudrais passer un autre paramètre avec le fichier, donc je mets l'entrée cachée sous forme. Je peux télécharger un fichier et le lire dans Java mais je ne peux pas lire type_chooser,

  ------WebKitFormBoundaryZxF6MCYJpTOLUokN
 Content-Disposition: form-data; name="type_chooser"

 2
 ------WebKitFormBoundaryZxF6MCYJpTOLUokN
 Content-Disposition: form-data; name="file"; filename="isci.xlsx"
 Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

Donc, si j'écris;

 request.getParameter("type_chooser");

Je deviens nul

Comment puis-je obtenir type_chooser?

Remarque: j'ai essayé;

  dropzone.on("sending,function(file,xhr,data){
     data.append("type_chooser","1");
  });

Cela donne la même sortie avec un champ caché sous forme de zone de dépôt, les deux envoient type_chooser mais je ne peux pas le lire en Java

javascriptdropzone.js
18
Sahin Yanlık

Vous pouvez ajouter des données avec les données du formulaire

 $("div#dropzone_profile_photo").dropzone({
            url: "/file-upload/",
            init: function() {
                this.on("sending", function(file, xhr, formData){
                        formData.append("data", "loremipsum");
                });
            }
        });

$("div#dropzone_profile_photo").dropzone({
  url: "/test",
  init: function() {
    this.on("sending", function(file, xhr, formData) {
      formData.append("data", "loremipsum");
      console.log(formData)
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<div id="dropzone_profile_photo" style="width:400px;height:400px; background-color:blue"></div>
26
Iceman

La mienne était similaire à Sahin Yanlık

var myDropzone = new Dropzone(dropzoneid,
            {
                url: "/files/post",
                acceptedFiles: 'image/*',
                paramName: "file", // The name that will be used to transfer the file
                maxFilesize: 1, // MB
                maxFiles: 1,
                init: function () {

                    // Using a closure.
                    var _this = this;

                    // Setup the observer for the button.
                    $("#clear-dropzone").on("click", function () {
                        // Using "_this" here, because "this" doesn't point to the dropzone anymore
                        _this.removeAllFiles();
                        // If you want to cancel uploads as well, you
                        // could also call _this.removeAllFiles(true);
                    });
                    //this.on("maxfilesexceeded", function (file)
                    //{
                    //    this.removeFile(file);
                    //});

START (Ceci est la priorité pour envoyer des données supplémentaires)

                    this.on("sending", function(file, xhr, data) {
                        data.append("filetype", "avataruploadtype");
                    });

FIN

                    this.on("addedfile", function() {
                        if (this.files[1] != null) {
                            this.removeFile(this.files[0]);
                        }
                    });
                    this.on("removedfile", function (file) {
                        //html manipulation to disable and select certain page stuff
                    });
                    this.on("success", function (file) {
                         //html manipulation to disable and select certain page stuff                    });
                },
                accept: function (file, done) {
                    if (file.name == "justinbieber.jpg") {
                        done("Naha, you don't."); //just in case!!!!
                    } else {
                        //console.log("done!!!");
                        console.log(done());
                    }
                },
                headers: { "avatar": "avatarupload" }, //you might be also to piggyback of the headers in serverside
                uploadMultiple: false,
                clickable: true,
                addRemoveLinks: true,
            });
13
Adam

Salut, j'ai eu le même problème après que beaucoup de recherches ont trouvé cette solution, a fonctionné pour moi, j'utilise jQuery dropzone.

$("#dropzone").dropzone({
    url: "abcd.php",
    dictDefaultMessage: "Drop files here or<br>click to upload...",
    params: {'param_1':'xyz','para_2':'aaa'}
});

l'option params est ce que j'ai trouvé pour envoyer des données supplémentaires avec dropzone. les paramètres de l'option params sont reçus dans $_POST et fichier téléchargé dans $_FILE.

J'espère que cela t'aides.

8
Ajaypratap

essayez de l'ajouter à votre liste de paramètres get comme ceci

<form action="/UnitSummary/UploadFile?param1=value&param2=value" class="dropzone" enctype="multipart/form-data" id="imgUpload" method="post">
    <div class="fallback">
        <input name="file" type="file" multiple />
        <input type="submit" value="Upload" />
    </div>
</form>
8
harshal lonare

J'avais un même problème, je n'ai pas pu le lire en Java

J'ai donc essayé et cela a fonctionné.

contentDropZone.on('processing', function(file){
    console.log("Processing the file");
    contentDropZone.options.url = "Uploader?campaignid="+campaignid+"&circleid="+circleid;
});
3
vkscool

Il s'agit d'un dropzone de travail complet avec des paramètres supplémentaires car les autres méthodes trouvées en ligne ne fonctionnaient pas pour moi.

Dropzone.autoDiscover = false;
var valid_extensions=  /(\.pdf|\.doc|\.docx|\.xls|\.xlsx|\.jpg|\.jpeg|\.png|\.tiff|\.wpd)$/i;

    $('#insurance_type').on('change',function(){
        ins_Type=$(this).val();          
    });
    $('#insurance_expirationdate').on('change',function(){
        ins_Date=$(this).val();          
    });

myDropzone = new Dropzone("#dropzdoc",{
 url: 'Your URL where to send the data to',


 //this is how extra parameters got passed to dropzone

 sending: function(file, xhr, formData) {
   formData.append("insurance_type", ins_Type);  //name and value
   formData.append("insurance_expirationdate", ins_Date); //name and value

},

 //end of sending extra parameters

 acceptedFiles:".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.tiff,.wpd",
 dictInvalidFileType: "You can't upload files of this type, only png or jpg file",
 paramName: "insurance_doc",
 createImageThumbnails:false,
 dictDefaultMessage: "<div style='text-align:left;'>- Select your Insurance Type.<br>\n\
                      - Select 1 Date.<br>\n\
                      - Drop your file here.<br><div>\n\
                       Only <span style='color:red;'>1</span> file is    acccepted.",
 autoProcessQueue:false,
 maxFiles: 1
});

myDropzone.on("processing", function(file, progress) {
    $('#upload_process').fadeIn();

});

myDropzone.on("success", function(file,response) {
    $('#upload_process').fadeOut();

  });

myDropzone.on("addedfile", function(file) {
//test extension files
    if (this.files.length) {
        var _i, _len;
        for (_i = 0, _len = this.files.length; _i < _len; _i++)
        {
            if(valid_extensions.test(this.files[_i].name)==false)               
                {
                   alert('Invalid file extension.\nAllowed file extensions: pdf, doc, docx, xls, xlsx, jpg, jpeg, png, tiff, wpd');
                   this.removeFile(file); 
                   return;
                }
        }
; 


 //if all good then procced the queue
    if(ins_Type !==''&& ins_Date !==''){
            this.options.autoProcessQueue = true;
            this.processQueue();         
    }else{

        alert('Date are empty');
        this.removeAllFiles(file); 
    }
  });

  //dropzone willl  be clickable after this action below
$('.files-list').on('click','img', function(){ 
            if($('.files-list li img').length == 0){
                myDropzone.removeAllFiles(true);

                myDropzone.setupEventListeners();  
            }

});
  //dropzone will not be clickable after this action below
 if($('.files-list li').children('img').length > 0){
      myDropzone.removeEventListeners();
 }
2
gizmo

Utilisez les options params: function params(files, xhr, chunk) { return { '_token' : __csrf_token }; } comme indiqué dans l'exemple ci-dessous bloc de code.

Dropzone.options.uploadDropzone = {
    paramName: "__NAME",
    maxFilesize: 6,
    thumbnailWidth: 400,
    thumbnailHeight: 400,
    dictDefaultMessage: 'Drop or Paste here.',
    params: function params(files, xhr, chunk) { return { '_token' : __csrf_token }; }
};
1
edam

eh bien, juste pour ceux qui atteignent ce fil aussi tard que moi, je vais laisser la réponse de la section conseils de la documentation :

Dropzone soumettra tous les champs cachés que vous avez dans votre formulaire dropzone. C'est donc un moyen facile de soumettre des données supplémentaires. Vous pouvez également utiliser l'option params.

0
Antonio de Mora