Dropzone.js 已附加答案

【问题标题】：Dropzone.js already attachedDropzone.js 已附加
【发布时间】：2014-12-05 21:16:54
【问题描述】：

我已经在我的项目中实施了 dropzone，一切都很好。除了浏览器决定在页面请求清晰时抛出错误之外，我已将视图修剪为很长，但下面的 HTML 当前位于表单中（不确定这是否会导致问题）我只有对此处显示的 dropzone 的一次引用，dropzone.js 再次包含在捆绑配置中，仅出现一次。

错误 : if(this.element.dropzone)throw new Error("Dropzone already attach.")

这是我的看法

<div class="form-group">
    <div class="col-xs-12 dropzone" id="UploadImage">
         <input type="file" id="id-input-file-2" />
     </div>
</div>

这就是我创建dropzone的方式

 $(document).ready(function () {

        $("div#UploadImage").dropzone({ url: '@Url.Action("SaveUploadedFile", "Person")' });
 });

和我的控制器如下

 public ActionResult SaveUploadedFile()
    {
        bool success = true;

        string fName = string.Empty;

        try
        {
            foreach (var file in Request.Files.Cast<string>().Select(fileName => Request.Files[fileName]).Where(file => file != null))
            {
                fName = file.FileName;

                if (file.ContentLength > 0)
                {
                   // will write the rest of the code here
                }
            }
        }
        catch (Exception ex)
        {
            success = false;
        }

        return Json(success ? new { Message = fName } : new { Message = "Error in saving file" });
    }

现在我能够在控制器中检索图像，只是不确定 dropzone 在代码中的哪个位置再次被初始化，这导致了上述错误。

更新

在尝试了 Daves 的建议后，我的 jquery 现在看起来像这样

$(document).ready(function () {

        Dropzone.options.myAwesomeDropzone = false;

        $("div#UploadImage").dropzone({
            url: '@Url.Action("SaveUploadedFile", "Person")',
            addRemoveLinks: true,
            removedfile: function (file) {
                var name = file.name;
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("DeleteUploadedFile", "Person")',
                    data: "id=" + name,
                    dataType: 'html'
                });
                var ref;
                return (ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
            },
            maxFilesize: 2,
            maxFiles: 12,

        });
});

但我仍然得到错误。

【问题讨论】：

标签： c# jquery asp.net-mvc asp.net-mvc-5 dropzone.js

【解决方案1】：

从Reference here试试

像这样全局关闭自动发现：Dropzone.autoDiscover = 错误；或
关闭特定元素的自动发现，如下所示： Dropzone.options.myAwesomeDropzone = false;

【讨论】：

我已经尝试过这个并用新的 Jquery 更新了我的问题，但我仍然得到错误？！？！我已将您的建议放在我的 Dropzone 实现之上

【解决方案2】：

从 UploadImage 元素的类属性中删除“dropzone”，错误就会消失。我有同样的问题，并解决了它。

我认为您通过将 autoDiscover 设置为 false 并将元素的类设置为“dropzone”来向插件提供混合消息。

【讨论】：

【解决方案3】：

这是唯一对我有用的解决方案。

我最终将 css 类重命名为“dropzone1”，然后在 basic.cs 和 dropzone.cs 文件中将“dropzone”的所有实例重命名为“dropzone1”。这样我就保留了所有的 CSS 样式。

一旦我这样做了，它就像一个魅力。

【讨论】：