配置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

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

正确的表格声明是：

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