Question

我已经在我的项目中实现了dropzone，一切都很好。除了浏览器决定在页面请求清晰时抛出错误我已经将视图调整为非常长，但是下面的HTML当前存在于一个表单中（不确定是否会导致问题）我只有对此处显示的dropzone的一个引用，dropzone.js再次包含在bundle config中，只出现一次。

错误：if（this.element.dropzone）抛出新错误（“Dropzone已经附加。”）

这是我的观点

<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,

        });
});

但我仍然得到错误。

Answer 1

从Reference here

试试

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

Answer 2

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

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

Answer 3

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

我最终做的是将css类重命名为＆＃34; dropzone1＆＃34;，然后重命名＆＃34; dropzone＆＃34;的所有实例。 to＆＃34; dropzone1＆＃34;在basic.cs和dropzone.cs文件中。这样我保留了所有的CSS样式。

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

Dropzone.js已经附加

3 个答案: