web-dev-qa-db-ja.com

dropzone.jsを使用して追加のパラメーターを送信する

Dropzone.jsを追加しようとしていますが、ファイルに別のパラメーターを渡したいので、非表示の入力をformに入れます。ファイルをアップロードして、Java partで読むことができますが、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

だから私が書いたら

 request.getParameter("type_chooser");

Nullを取得します

Type_chooserを取得するにはどうすればよいですか？

注：試しました。

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

これにより、ドロップゾーン形式の非表示フィールドで同じ出力が得られます。どちらもtype_chooserを送信していますが、Javaで読み取ることができません

javascriptdropzone.js
18
Sahin Yanlık

Formdataと共にデータを追加できます

 $("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

鉱山はサヒン・ヤンルクに似ていた

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（これは追加データを送信するためのオーバーライドです）

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

終わり

                    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

こんにちは、多くの研究がこのソリューションを見つけた後、私は同じ問題を抱えていましたが、私のために働いたのはjQuery dropzoneを使用しています。

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

paramsオプションは、dropzoneで追加データを送信するために見つけたものです。 paramsオプションパラメータは$_POSTで受信され、アップロードされたファイルは$_FILEで受信されます。

お役に立てれば。

8
Ajaypratap

次のようにgetパラメータリストに追加してみてください

<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

私は同じ問題を抱えていましたが、Javaで読むことができませんでした

だから私はこれを試してみたが、うまくいった。

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

これは、オンラインで見つかった他の方法がうまくいかなかったため、追加のパラメーターを備えた完全に機能するドロップゾーンです。

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

Example-codeblockの以下に示すように、params: function params(files, xhr, chunk) { return { '_token' : __csrf_token }; }オプションを使用します。

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

まあ、ちょうど私がやったこのスレッドに到達した人のために、私は ドキュメントのヒントセクション からの答えを残します：

Dropzoneは、ドロップゾーンフォームにある非表示フィールドを送信します。したがって、これは追加データを送信する簡単な方法です。 paramsオプションも使用できます。

0
Antonio de Mora