将输入文件浏览按钮变成 Dropzone 的最佳做法是什么？

Question

我是dropzone 的新手，我想将浏览按钮变成接受文件的放置区。

这是我现在的表格。

@extends('layouts.be.master')
@section('content')

<script src="//cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>

<div class="card-body card-padding">
    <div class="row">


        {!! Form::open(array('class' => 'form-horizontal dropzone', 'role' =>'form', 'url'=>'portfolio/store','files' => true)) !!}

        <div class="col-sm-12">

            {{-- Name --}}
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" value="{{Request::old('name')}}"  value="" name="name" class="form-control" id="name" placeholder="Name">
                </div>
            </div>

            {{-- Type --}}
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">Type</label>
                <div class="col-sm-10">
                    <select name="type" class="form-control">
                        @foreach($portfolioTypes as $item)
                        <option value="{{ $item }}">{{ $item }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- Tags --}}
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">Tags</label>
                <div class="col-sm-10">

                </div>

                <input id="tags" name="tag">
            </div>

            {{-- URL --}}
            <div class="form-group">
                <label for="url" class="col-sm-2 control-label">URL</label>
                <div class="col-sm-10">
                    <input name="url" type="text" value="" class="form-control" placeholder="URL">
                </div>
            </div>


            {{-- URL --}}
            <div class="form-group">
                <label for="url" class="col-sm-2 control-label">Images</label>
                <div class="col-sm-10 ">

                    <input id="images" name="images[]" type="file" multiple>

                </div>
            </div>

            {{-- Description --}}
            <div class="form-group">

                <label for="email" class="col-sm-2 control-label">Description</label>
                <div class="col-sm-10">

                    <textarea name="description" rows="20" cols="80" id="description">
                    </textarea>
                    <script>
                        CKEDITOR.replace( 'description' );
                        CKEDITOR.config.height = 500;
                    </script>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-4 col-sm-8">
                    <a class="btn btn-default" href="/portfolio"> Cancel </a>
                    <button type="submit" class="btn btn-info">Create</button>
                </div>
            </div>



        </div>


        {!!Form::close()!!}


    </div>
</div>

@stop

@section('custom-scripts')

{{-- Tags --}}
<link rel="stylesheet" type="text/css" href="/css/jquery.tag-editor.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript" src="/js/jquery.tag-editor.js"></script>

<script type="text/javascript" src="/js/ckeditor.js"></script>

<script type="text/javascript" src="/js/dropzone.js"></script>



<script type="text/javascript">

    $('#tags').tagEditor({

        autocomplete: {
            delay: 0,
            position: { collision: 'flip' },
            source: [<?php echo '"'.implode('","', $skillList).'"' ?>]
        },
        forceLowercase: false,
        delimiter: ',', /* space and comma */
        placeholder: 'Enter tags ...',
        initialTags: ['HTML','CSS','Javascript','jQuery','Bash']

    });

    $("#images").dropzone();

</script>
@stop

这是我的结果

文档建议将class"dropzone" 添加到表单元素中，但是如果我的整个表单只有文件上传，但我还有其他输入。

现在，我的浏览按钮运行良好（100% 测试），我根本不想破坏该功能。 我只是想改善它的外观，添加删除文件的功能，并在提交表单后立即提交这些文件。

如何处理？

---

更新

我尝试了@Kunal 的建议

Dropzone.options.myDropzone= {
    url: 'portfolio/store',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("name", jQuery("input[name ='name']").val());
            formData.append("name", jQuery("select[name ='type']").val());
            formData.append("name", jQuery("input[name ='tag']").val());
            formData.append("name", jQuery("input[name ='url']").val());
            formData.append("name", jQuery("textarea[name ='description']").val());
        });
    }
}

我没有看到任何东西提交到我的后端，而且似乎提交了 2 次，因为我看到创建了 2 条记录。

Answer 1

您只需更改 dropzone.js 中的某些设置，即可在您的 form 中添加 dropzone.js 和其他 inputs。它们如下

1：创建一个普通表单（不要忘记方法和 enctype args，因为 dropzone 不再处理它）。

2：在 div 中放入 class="dropzone"（Dropzone 就是这样附加到它的）和 id="yourDropzoneName"（用于更改选项）。

3：设置 Dropzone 的选项，设置表单和文件将被发布的 url，停用 autoProcessQueue（因此仅在用户按下“提交”时才会发生）并允许多次上传（如果需要）。

4：设置init函数使用Dropzone而不是点击提交按钮时的默认行为。

5：仍然在 init 函数中，使用“sendingmultiple”事件处理程序将表单数据与文件一起发送。

HTML

<form action="upload.php" enctype="multipart/form-data" method="POST">
    <input type="text" id ="firstname" name ="firstname" />
    <input type="text" id ="lastname" name ="lastname" />
    <div class="dropzone" id="myDropzone"></div>
    <button type="submit" id="submit-all"> upload </button>
</form>

Dropzone.js

Dropzone.options.myDropzone= {
    url: 'upload.php',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("firstname", jQuery("#firstname").val());
            formData.append("lastname", jQuery("#lastname").val());
        });
    }
}