Question

我想将带有DropzoneJS的文件上传器插入到我的HTML表单中。我根据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制作了一个dropzone。我在教程中设置了类似的内容，但以下的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容器中的其他元素。

将dropzone与简单形式相结合

1 个答案: