具有正常形式的 Dropzone

Question

我的问题是我必须将普通表单与 dropzone.js 结合起来进行拖放上传。用户单击提交按钮后，如果输入中有值，则 ajax 请求将数据发送到 php 脚本。

但是如何通过 dropzone 和 ajax-request 组合文件呢？当用户单击按钮时，我会发送两者。如果我在区域中拖动文件，则会发送该文件。

autoProcessQueue: false

这样，如果用户在区域中拖动文件，文件将不会被发送。

需要的解决方案：用户填写表单，在区域中拖动文件，如果用户单击按钮，则值和文件将通过 ajax 请求发送。

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

Answer 1

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

他们已经给出了你想要的，但是在他们给出的内容中需要添加一些东西，比如不让整个表单可点击和其他东西。 下面的代码对我来说很好用

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>

注意：您不必在 php 文件中做任何花哨的事情。只需编写您通常在 PHP 中编写的内容即可上传文件和输入。

看看这是否适合你。