javascript - Dropzone with normal form -

my problem must combine normal form dropzone.js drag&drop upload. after user clicks submit-button, ajax-request send data php-script if there values in inputs.

but how can combine files dropzone , ajax-request? send both, when user clicks button. if drag file in zone file send.

autoprocessqueue: false 

this make it, file doesn't send if user drag file in zone.

solution needed: user fills form, drag file in zone , if user click on button, values , files send ajax-request.

some demo code: http://jsfiddle.net/wqp5b/

i had same problem solved it. can checkout link dropzone --> https://github.com/enyo/dropzone/wiki/combine-normal-form-with-dropzone

they have given want there things added in have given not making whole form clickable , other things . code below works fine me

form.html

<form method="post" action="upload.php" class="dropzone" id="mydropzone" enctype='multipart/form-data'> //remember gave id mydropzone form              <label>username:<input type="text" name="uname"/> </label>     <label>password:<input type="text" name="pass"/> </label>     //this dropzone drag , drop section.     //notice have given id dropzonepreview.     <div id="dropzonepreview"></div>     <input type="button" id="sbmtbtn" value="submit"/>     //we have given id sbmtbtn button    </form> <script>     dropzone.options.mydropzone = {     //url not has written      //if have wrote action in form      //tag have mentioned here convenience sake          url: 'upload.php',          addremovelinks: true,         autoprocessqueue: false, // important dont want form submitted unless have clicked submit button         autodiscover: false,         paramname: 'pic', // optional 1 accessed in php writing $_file['pic'] // if dont specify bydefault taked 'file' paramname eg: $_file['file']          previewscontainer: '#dropzonepreview', // specify on div id must show files         clickable: false, // tells dropzone not clickable . have because v dont want whole form clickable          accept: function(file, done) {             console.log("uploaded");             done();         },         error: function(file, msg){             alert(msg);         },         init: function() {             var mydropzone = this;             //now submit form when button clicked             $("#sbmtbtn").on('click',function(e) {                e.preventdefault();                mydropzone.processqueue(); // submit form specified action path               // after this, whole form submitted inputs + files , php code remain usual          //remember don't have call ajax or yourself, dropzone take care of             });               } // init end     }; </script> 

note : dont have fancy stuff in php file . write write in php upload files , input .

see if works you.