配置 Dropzone.js 失败

Question

我首先使用 dropzone。我的目标是拥有一个如下所示的文件上传器：

不幸的是，我的输出是：

这是我的 html 页面：

 @using (Html.BeginForm("SaveUploadedFile", "Home", FormMethod.Post, new { @name = "myDropzone", id = "myDropzone", @enctype = "multipart/form-data" }))
{
    <div>
        <div id="previews" class="dropzone dz-clickable dz-message box__input">
            <div style="text-align: center">
                <i class="fa fa-cloud-upload" style="font-size: 23px; position: relative; top: 4px;"></i> <span style="margin-left: 20px">Drop files  to attach or browse</span>
            </div>
        </div>
        <div id="previewFiles"></div>
    </div>

    <div>
        <input type="submit" id="Submit" name="Submit" class="btn btn-success m-t-5" value="Submit" />
    </div>
}

以及配置 dropzone：

$('#myDropzone').dropzone({
paramName: "files",
clickable: '#previews',
previewsContainer: "#previewFiles",
autoProcessQueue: false,
uploadMultiple: true,
addRemoveLinks: true,
thumbnail: function (file, dataUrl) {
    if (file.previewElement) {
        file.previewElement.classList.remove("dz-file-preview");
        var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");

init: function () {
    var self = this;
    // config
    self.options.addRemoveLinks = true;
    self.options.dictRemoveFile = "Delete";
    //New file added
    self.on("addedfile", function (file) {
        console.log('new file added ', file);
        $('.dz-success-mark').hide();
        $('.dz-error-mark').hide();
    });
}});

如何更改我的配置，使上传器像从 dropzonejs.com 中选择的示例一样？谢谢。

Answer 1

对于运行遇到类似问题的用户，我post解决方案。重点是对表单使用 dropzone class。

正确的表格声明是：

@using (Html.BeginForm("SaveUploadedFile", "Home", FormMethod.Post, new { @class="dropzone", @name = "myDropzone", id = "myDropzone", @enctype = "multipart/form-data" }))
{
    // Whatever you nees
}

配置 Dropzone.js 失败

Configuring Dropzone.js fails

html

asp.net-mvc

dropzone.js