与正常形式的Dropzone [英] Dropzone with normal form

问题描述

我的问题是，我必须将一个正常形式与dropzone.js结合起来进行拖放上传。在用户点击提交按钮后，如果输入中有值，则ajax-request会将数据发送到php-script。

但是我怎样才能合并由dropzone和ajax请求的文件？我会发送这两个，当用户点击按钮。如果我在区域中拖动一个文件而不是文件将被发送。

  autoProcessQueue：false 
  

这表明，如果用户在区域中拖动文件，则不会发送该文件。

需要的解决方案：用户填写表单，拖动区域中的文件，并且如果用户单击按钮，则值和文件将使用ajax-request发送。 / strong>

代码演示：
http://jsfiddle.net/wQP5B/

解决方案

我也有过同样的问题，但我解决了它。
您可以从dropzone中检出此链接 - > https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone

他们给了你想要的东西但是那里有些东西要添加到他们所提供的内容中，而不是让整个表单可点击和其他东西。
以下代码适用于我

form.html

 < form method =postaction =upload.phpclass =dropzoneid =mydropzoneenctype ='multipart / form-data'> //记得我们给了一个ID为mydropzone的表单
< label>用户名：< input type =textname =uname/> < /标签> 
< label>密码：< input type =textname =pass/> < /标签> 
 //这将是dropzone的拖放部分。 
 //注意我们已经给它一个id dropzonePreview。 
< div id =dropzonePreview>< / div> 
< input type =buttonid =sbmtbtnvalue =submit/> 
 //我们已将id sbmtbtn提供给按钮
< / form> 
< script> 
 Dropzone.options.mydropzone = {
 //不需要写入
 //如果我们已经以
的形式编写了动作//标记，但是我在这里提到过只是为了方便起见
 url：'upload.php'，
 addRemoveLinks：true，
 autoProcessQueue：false，//这是很重要的，因为你不希望表单被提交，除非你点击了提交按钮
 autoDiscover：false，
 paramName：'pic'，//这是可选的像这样可以通过编写$ _FILE ['pic']在php中访问//如果你不指定它bydefault它将paramName作为'file'例如：$ _FILE ['file'] 
 previewsContainer：'#dropzonePreview'，//我们指定在哪个div id上显示文件
 clickable：false，/ /这表明dropzone不会被点击。我们必须这样做，因为不想让整个表单可点击
 accept：function（file，done）{
 console.log（uploaded）; 
 done（）; 
}，
错误：函数（file，msg）{
 alert（msg）; 
}，
 init：function（）{
 var myDropzone = this; 
 //现在我们将在点击按钮时提交表单
 $（＃sbmtbtn）on（'click'，function（e）{
 e.preventDefault（）; 
 myDropzone.processQueue（）; //这会将你的表单提交到指定的操作路径
 //在此之后，你的整个表单将被提交所有的输入+你的文件和php代码将保留像往常一样
 //记住你不必自己调用ajax或任何东西，dropzone会照顾那
}）; 
} // init end 
}; 
< / script> 
  

注意：你不必在php文件中做任何花哨的东西。只需写下你通常使用PHP编写的上传文件和输入内容即可。

看看它是否适合你。

My problem is that I must combine a normal form with dropzone.js for a drag&drop upload. After the user clicks the submit-button, then a ajax-request send the data to a php-script if there are values in the inputs.

But how I can combine the files by dropzone and the ajax-request? I would send both, when the user clicks the button. If I drag a file in the zone than the file will be send.

autoProcessQueue: false

This make it, that the file doesn't will be send if the user drag a file in the zone.

Solution needed: User fills the form, drag a file in the zone and if the user click on the button, then the values and files will be send with a ajax-request.

Some demo for the code: http://jsfiddle.net/wQP5B/

解决方案

I also had the same problem but i solved it. You can checkout this link from dropzone --> https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone

They have given what you want BUT there are some things to be added in what they have given like not making the whole form clickable and other things . The code below works fine for me

form.html

<form method="post" action="upload.php" class="dropzone" id="mydropzone" enctype='multipart/form-data'> //remember we gave an id mydropzone to the form         
    <label>Username:<input type="text" name="uname"/> </label>
    <label>Password:<input type="text" name="pass"/> </label>
    //this will the dropzone drag and drop section.
    //notice we have given it an id dropzonePreview.
    <div id="dropzonePreview"></div>
    <input type="button" id="sbmtbtn" value="submit"/>
    //we have given id sbmtbtn to the button   
</form>
<script>
    Dropzone.options.mydropzone = {
    //url does not has to be written 
    //if we have wrote action in the form 
    //tag but i have mentioned here just for convenience sake 
        url: 'upload.php', 
        addRemoveLinks: true,
        autoProcessQueue: false, // this is important as you dont want form to be submitted unless you have clicked the submit button
        autoDiscover: false,
        paramName: 'pic', // this is optional Like this one will get accessed in php by writing $_FILE['pic'] // if you dont specify it then bydefault it taked 'file' as paramName eg: $_FILE['file'] 
        previewsContainer: '#dropzonePreview', // we specify on which div id we must show the files
        clickable: false, // this tells that the dropzone will not be clickable . we have to do it because v dont want the whole form to be clickable 
        accept: function(file, done) {
            console.log("uploaded");
            done();
        },
        error: function(file, msg){
            alert(msg);
        },
        init: function() {
            var myDropzone = this;
            //now we will submit the form when the button is clicked
            $("#sbmtbtn").on('click',function(e) {
               e.preventDefault();
               myDropzone.processQueue(); // this will submit your form to the specified action path
              // after this, your whole form will get submitted with all the inputs + your files and the php code will remain as usual 
        //REMEMBER you DON'T have to call ajax or anything by yourself, dropzone will take care of that
            });      
        } // init end
    };
</script>

NOTE : YOU DONT have to do any fancy stuff in the php file . Just write what you would normally write in PHP to upload files and input .

See if this works for you.

这篇关于与正常形式的Dropzone的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！