Question

我正尝试在laravel上使用dropzone进行多次上传，我查看了dropzone的文档。

该示例必须使用表单并提供类dropzone，在此情况下，我想使用dropzone和其他文本字段并收到错误未捕获错误：无效的dropzone元素。。这是屏幕截图：error screenshot

这是我的html代码：

<form method="POST" action="/backend/blog" enctype="multipart/form-data" id="formku">

                    <div class="form-group label-floating">
                        <label class="control-label">Title</label>
                        <input type="text" name="title" class="form-control">
                    </div>

                    <div class="form-group label-floating">
                        <label class="control-label">Written By</label>
                        <input type="text" name="written_by" class="form-control">
                    </div>


                    <div class="form-group" id="place_image" style="display: none;">
                      <img src="" id="image_category" style="width: 95px;height: 50px;">
                     </div>

                      <div class="form-group">
                          <a class="btn btn-primary" id="btn_choose_image" onclick="$('#choose_image').click();">Choose Image</a>
                          <input style="display: none;" type="file" id="choose_image" name="image"></input>
                      </div>

                   <textarea id="bodyField" name="description"></textarea>

                    @ckeditor('bodyField', ['height' => 250])


                    <div class="form-group label-floating">
                        <div class="row">
                            <label class="control-label">Category</label>
                            <select class="selectpicker" data-style="btn btn-primary btn-round" title="Single Select" data-size="7" name="category">
                                <option disabled selected>Choose Category</option>
                                @foreach( $categories as $key => $category): 
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach;
                            </select>
                        </div>
                    </div>

                    <div class="dropzone" id="imageUpload">
                        <h3>Upload Multiple Image By Click On Box</h3>
                    </div>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="status"> Status
                        </label>
                    </div>



                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="submit" class="btn btn-fill btn-rose" value="Submit">
                </form>

这是我的JS代码：

Dropzone.autoDiscover = false;
    var imageUpload =  new Dropzone("div#imageUpload", { 
        url: "dropzone/store", 
        autoProcessQueue:false,
        uploadMultiple: true,
        maxFilesize:5,
        maxFiles:3,
        acceptedFiles: ".jpeg,.jpg,.png,.gif",

        init: function() {
            var submitButton = document.querySelector("#submit-all")
                //imageUpload = this; // closure

            submitButton.addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                imageUpload.processQueue(); // Tell Dropzone to process all queued files.
            });

            // You might want to show the submit button only when 
            // files are dropped here:
            this.on("addedfile", function() {
              // Show submit button here and/or inform user to click it.
            });

        }
    });

有人有解决这个麻烦的办法吗？

Answer 1

您可以尝试首先检查imageUpload元素是否存在：

Dropzone.autoDiscover = false;
if (document.getElementById('imageUpload')) {
    var imageUpload =  new Dropzone("div#imageUpload", { 
        url: "dropzone/store", 
        autoProcessQueue:false,
        uploadMultiple: true,
        maxFilesize:5,
        maxFiles:3,
        acceptedFiles: ".jpeg,.jpg,.png,.gif",

        init: function() {
            var submitButton = document.querySelector("#submit-all")
                //imageUpload = this; // closure

            submitButton.addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                imageUpload.processQueue(); // Tell Dropzone to process all queued files.
            });

            // You might want to show the submit button only when 
            // files are dropped here:
            this.on("addedfile", function() {
            // Show submit button here and/or inform user to click it.
            });

        }
    });
}

没有类形式的Laravel Dropzone无效元素

1 个答案: