将 dropzone 与简单形式相结合

Question

我想在我的 HTML 表单中插入一个带有 DropzoneJS 的文件上传器。我根据tutorial写了如下代码。

这是我的表格：

<form id="createProject" class="dropzone" action="/new_project" method="post" enctype="multipart/form-data">
    <input type="hidden" name="new_project" value="1">
    <div class="panel-body">
        <div class="row egal">
            <div action="#" class="col-md-4 col-xs-12 picture dropzone-previews">
                <div class="egal-center">
                    <h5>
                        Add Picture
                    </h5>
                    <div class="upload-box btn">
                        <i class="glyphicon glyphicon-plus"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-8 col-xs-12">
                <input type="text" name="title" class="form-control" placeholder="Add a new title"/>
                <input type="text" name="web_page" class="form-control" placeholder="Type in your project's website"/>
                <textarea name="description" cols="40" rows="5" class="form-control" placeholder="Say something about your project "></textarea>
            </div>
        </div>
        <div class="row">
            <div class="input-group">
                <input name="video[]" class="form-control" type="text" placeholder="Video"/>
                <div class="input-group-btn">
                    <button type="button" class="btn btn-login addNewField">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>
            <div class="input-group">
                <input name="prezi[]" class="form-control" type="text" placeholder="Prezi"/>
                <div class="input-group-btn">
                    <button type="button" class="btn btn-login addNewField">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-login btn-block">
            Create project
        </button>
    </div>
</form>

如您所见，我有一些输入字段和一个框，我用 JavaScript 将其做成了一个拖放区。我设置了教程中写的东西，但是下面的 JavaScript 不起作用。它已成功添加事件侦听器，只是 processQueue() 方法不起作用。我将最大文件上传设置为 1，因为只允许一张图片。

Dropzone.options.createProject={
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 1,
    maxFiles: 1,
    clickable: ".dropzone-previews",
    previewsContainer: ".dropzone-previews",
    paramName:"picture",
    init: function() {
        var myDropzone=this;
        this.element.querySelector("button[type=submit]").addEventListener("click", function(e){
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
            $(this).closest('form').ajaxFormSend(function(data){
                $('.projects-panel').prepend(Mustache.to_html(window.templates.panelProjects, data.data));
            });
        });
        this.on("sendingmultiple", function(){
        });
        this.on("successmultiple", function(files, response){
        });
        this.on("errormultiple", function(files, response){
        });
        this.on("maxfilesexceeded", function(file){
            myDropzone.removeFile(file);
            noty({
                type:'error',
                text:'No more files plesase!'
            });
        });
    }
}

最好的解决方案是，Dropzone 只在表单中设置具有特定名称的隐藏文件输入的值，并在发送表单时正常发送文件和其他数据。

注意：ajaxFormSend 是我编写的一种 jQuery 方法，用于在一个连接中发送文件和其他数据。我只是把它留在了代码中，因为我想用这种方法用 AJAX 发送整个表单，所以我只需要添加一个隐藏的输入字段，然后 Dropzone 设置这个输入字段的值。

Answer 1

您应该能够毫无问题地使用 dropzone 发送表单，但我认为您不能将文件从 dropzone 传递到常规输入字段，我相信这是出于安全原因。

要使用 dropzone 发送表单，请使用如下配置：

Dropzone.options.createProject = {
    autoProcessQueue: false,
    parallelUploads: 1,
    maxFiles: 1,
    previewsContainer: ".dropzone-previews",
    dictDefaultMessage: '',
    clickable: '.upload-box',
    paramName:"picture",
    init: function() {
        var myDropzone=this;
        this.element.querySelector("button[type=submit]").addEventListener("click", function(e){
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();

        });
        this.on('addedfile', function(file){
            $('.upload-box').hide();
        });
        this.on('success', function(file){
            console.log(file.xhr.response);
        });
    }
}

如果您只想允许一张图片不需要uploadMultiple 选项，并且上传完成后，您可以将要执行的代码放在success 事件中。在示例中，只是在控制台中打印来自服务器的响应。

还要注意选项 dictDefaultMessage 用于从 dropzone 中删除默认消息，clickable 选项用于使用与 dropzone 容器不同的元素。