配置 Dropzone.js 失败答案

【问题标题】：Configuring Dropzone.js fails配置 Dropzone.js 失败
【发布时间】：2018-06-19 06:06:47
【问题描述】：

我首先使用 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 中挑选的示例这样的上传器？谢谢。

【问题讨论】：

这看起来像是一个 CSS 问题。你如何设计它？您是否加载了默认 css https://github.com/enyo/dropzone/blob/master/dist/dropzone.css？
是的，我使用了正确的 css 文件
您正在显示所需的外观 dropzone 默认外观，但您拥有的 html 不是 dropzone 建议的 html，而是您使用 previewsContainer 和 clickable 选项来修改外观。所以我不确定你真正想要什么，如果你想要 dropzone 的默认外观，你应该使用 dropzone 默认 html 和选项dropzonejs.com/#usage。您还应该检查控制台是否有错误，因为您现在拥有 javascript，我确信显示了一些错误。
如果我简单地使用$('#myDropzone').dropzone();，输出没有什么不同。此外，我在控制台中看到的单个错误是No url is provided，我猜这与外观无关。

标签： html asp.net-mvc dropzone.js

【解决方案1】：

对于遇到类似问题的用户，我发布了解决方案。关键是对表单使用 dropzone 类。

正确的表单声明是：

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

【讨论】：