Question

我正在尝试创建一种Mediacenter，您可以点击按钮，然后通过Fancybox内的ajax打开“Mediacenter”。它显示了所有上传的图像（直到这里工作得很好）以及上传新图像的可能性。因此，我想使用Dropzone.js。

在ajax / fancybox中我试图添加一个dropzone-form：

<div id="dropimg"></div>
<script type="text/javascript">
$(function(){
  $("div#dropimg").dropzone({ url: "/file/post" });
});
</script>

但是所有id都在为我的div添加一个新类dz-clickable。不是Dropzone表格。

<div id="dropimg" class="dz-clickable"></div>

所以这意味着dropzone.js和jquery已经实现并且可以工作，但不知何故并不是一切。当我将代码直接添加到页面的<body>时，它完美地运行。但不是在ajax / fancybox中。

有人知道为什么吗？

谢谢！

Answer 1

关于ajax dropzone.js由于某种原因丢失了，我遇到了很多jquery插件的问题

我解决了这个问题，在成功回调中，我重新连接了脚本，然后安全地调用.dropzone

  $(document).ready(function() {
                $('#loadedFormId').load('url',
                    function(response, status, xhr) {                           
                            requireJs('dropzoneScript', '../../../../Scripts/Dropzone/dropzone.min.js', function() {
                                console.log('dropzone is alive');
                                $('#dropzoneForm').dropzone();
                            });
                        }
                    });
            });

并且requiredJs函数是一个js函数，它将为您重新下载脚本文件

function requireJs(scriptId, file, callback) {

    var element = document.getElementById(scriptId);
    element.parentNode.removeChild(element);

    var script = document.getElementsByTagName('script')[0],
    newjs = document.createElement('script');
    newjs.setAttribute('id', scriptId);
    // IE
    newjs.onreadystatechange = function () {
        if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
            newjs.onreadystatechange = null;
            callback();
        }
    };
    // others
    newjs.onload = function () {
        callback();
    };
    newjs.src = file;
    script.parentNode.insertBefore(newjs, script);
}

它看起来像一个奇怪的解决方案，但它对我有用...享受:)

Answer 2

感谢您的帮助，N0rA。但是我已经解决了＃34;它通过避免AJAX。我创建了媒体中心作为隐藏的div，我将其打开为Inline-Fancybox。这样Dropzone.js工作得很好。

在fancybox / ajax中的Init Dropzone.js

2 个答案: