时间戳

首页 > 解决方案 > Dropzone多文件上传一次上传2个文件

dropzone.js - Dropzone多文件上传一次上传2个文件

问题描述

我有以下代码

HTML

<form action="{{ route('documents.store') }}" method="POST" class="kt-form kt-form--label-right">
    @csrf
    <div class="kt-portlet__body">
        <div class="form-group">
            <div class="dropzone dropzone-default dropzone-success" id="documents_upload" style="padding: 0;">
                <div class="dropzone-msg dz-message needsclick">
                    <h3 class="dropzone-msg-title">Drop files here</h3>
                </div>
            </div>
        </div>
    </div>
</form>

Javascript

<script type="text/javascript">
    $(document).ready(function() {
        $('#documents_upload').dropzone({
            url: "{{ route('documents.store') }}", // Set the url for your upload script location
            paramName: "documents", // The name that will be used to transfer the file
            maxFiles: 50,
            maxFilesize: 4, // MB
            addRemoveLinks: true,
            acceptedFiles: "application/msword, application/vnd.ms-excel, application/pdf, image/*, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/*",
            uploadMultiple: true,
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            queuecomplete: function() {
                // notify about successful upload

                // window.location.replace("{{ route('client.documents.index') }}");
            }
        });
    });
</script>

问题

似乎这一次上传了 2 个文件。因此，如果我想上传 8 个文件，它会发出 4 个请求，每个请求包含 2 个文件。我想一次上传，有什么简单的方法可以做到吗？这种方法会带来很多问题，因为用户可能会上传大量的文件，当一半都准备好时，他可以离开/刷新页面等，他必须搜索哪些文件已经上传，哪些文件没有。

标签： dropzone.jsdropzone

解决方案

您需要告诉 dropzone 在您的 dropzone 选项中按您想要的数量进行并行上传。

<script type="text/javascript">
$(document).ready(function() {
    $('#documents_upload').dropzone({
        url: "{{ route('documents.store') }}", // Set the url for your upload script location
        paramName: "documents", // The name that will be used to transfer the file
        maxFiles: 50,
        maxFilesize: 4, // MB
        addRemoveLinks: true,
        acceptedFiles: "application/msword, application/vnd.ms-excel, application/pdf, image/*, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/*",
        parallelUploads:10,
        uploadMultiple: true,
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        queuecomplete: function() {
            // notify about successful upload

            // window.location.replace("{{ route('client.documents.index') }}");
        }
    });
});

让我知道它是否有效！

推荐阅读