Question

有一个显示文件的表（一个tr文件），在表上创建了一个dropzonejs，所以我可以拖放文件并放在桌子上。我想添加一个“预览”作为表的TR元素，但我不能这样做。这是我的预览模板的样子：

<tr class="dz-preview">
    <td><span class="name" data-dz-name></span></td>
    <td><span class="size" data-dz-size></span></td>
    <td colspan="5">
    <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress>        </div>
    </div>
    </td>
</tr>

问题是Dropzone.js这样做：

Dropzone.createElement = function(string) {
    var div;
    div = document.createElement("div");
    div.innerHTML = string;
    return div.childNodes[0];
};

TR或TBODY不是DIV的有效子项，因此它将被创建为TEXT，TEXT没有属性querySelectorAll，并且存在错误。

是否有使用TR或TBODY作为预览模板的解决方案？

Answer 1

只需在代码中重新定义Dropzone.createElement函数。

在我的情况下，我使用jQuery：

$(function() {
    Dropzone.createElement = function(string) {
        var el = $(string);
        return el[0];
    };

    var dropzone = new Dropzone(document.body, options);
});

Answer 2

所以这里有一个修复问题的Dropzone.createElement函数：

替换它：

div = document.createElement("div");

有了这个：

if (string.substr(0, 3) == '<tr'){
    // Table elements can not be wrapped into a div
    div = document.createElement("tbody");
} else {
    div = document.createElement("div");
}

Answer 3

尽管我建议使用@strikes答案作为最合适的答案。我将使用表格格式附加完整实现的代码，该格式是@strikes answer和DropzoneJS bootstrap template

的扩展

PS：运行代码段功能正常，因此您可以在此处尝试运行该代码段，以查看其是否正常运行。

['Park', 'Restaurant', 'Not Available', 'Not Available']

$('#allselect').change(function () {

            var selections = document.getElementsByName('selection');
            for( var i=0; i<selections.length; i++){
                if(selections[i].checked == false) {
                    selections[i].checked = true;
                }
                else {
                    if(selections[i].checked == true) {
                        selections[i].checked = false;
                    }
                }
            };
        });
        
 </script>
 <script>
        // Get the template HTML and remove it from the doument
        var previewNode = document.querySelector("#template");
        previewNode.id = "";
        var previewTemplate = previewNode.parentNode.innerHTML;
        previewNode.parentNode.removeChild(previewNode);

        Dropzone.createElement = function(string) {
            var el = $(string);
            return el[0];
        };
        var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
            url: "{{ route('user.warehouse_images.store') }}", // Set the url
            thumbnailWidth: 80,
            paramName: "warehouse_image",
            thumbnailHeight: 80,
            parallelUploads: 20,
            previewTemplate: previewTemplate,
            autoQueue: false, // Make sure the files aren't queued until manually added
            previewsContainer: "#previews", // Define the container to display the previews
            clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
            renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();
                return time+file.name;
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
        });

        myDropzone.on("addedfile", function (file) {
            // Hookup the start button
            file.previewElement.querySelector(".start").onclick = function () {
                myDropzone.enqueueFile(file);
            };
        });

        // Update the total progress bar
        myDropzone.on("totaluploadprogress", function (progress) {
            document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
        });

        myDropzone.on("sending", function (file) {
            // Show the total progress bar when upload starts
            document.querySelector("#total-progress").style.opacity = "1";
            // And disable the start button
            file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
        });

        // Hide the total progress bar when nothing's uploading anymore
        myDropzone.on("queuecomplete", function (progress) {
            document.querySelector("#total-progress").style.opacity = "0";
        });
        myDropzone.on("sending", function(file, xhr, formData){
            formData.append("camera_id", "loremipsum");
            console.log(file);
            console.log(file.upload.filename);
            console.log(xhr);

        });

        // Setup the buttons for all transfers
        // The "add files" button doesn't need to be setup because the config
        // `clickable` has already been specified.
        document.querySelector("#actions .start").onclick = function () {
            myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
        };
        document.querySelector("#actions .cancel").onclick = function () {
            myDropzone.removeAllFiles(true);
        };

        html, body {
            height: 100%;
        }

        #actions {
            margin: 2em 0;
        }

        /* Mimic table appearance */
        div.table {
            display: table;
        }

        div.table .file-row {
            display: table-row;
        }

        div.table .file-row > div {
            display: table-cell;
            vertical-align: top;
            border-top: 1px solid #ddd;
            padding: 8px;
        }

        div.table .file-row:nth-child(odd) {
            background: #f9f9f9;
        }

        /* The total progress gets shown by event listeners */
        #total-progress {
            opacity: 0;
            transition: opacity 0.3s linear;
        }

        /* Hide the progress bar when finished */
        #previews .file-row.dz-success .progress {
            opacity: 0;
            transition: opacity 0.3s linear;
        }

        /* Hide the delete button initially */
        #previews .file-row .delete {
            display: none;
        }

        /* Hide the start and cancel buttons and show the delete button */

        #previews .file-row.dz-success .start,
        #previews .file-row.dz-success .cancel {
            display: none;
        }

        #previews .file-row.dz-success .delete {
            display: block;
        }
        .custom-control {
            position: relative;
            display: block;
            min-height: 1.5rem;
            padding-left: 2.5rem;
        }

Dropzone.js如何使用TR或TBODY作为预览模板？

3 个答案: