Question

我使用Dropzone处理客户端图像上传。以下是我工作的一个非常基本的例子： http://www.dressorganic.co.uk/dropzone-test/noajax.htm

正如您在查看源代码时所看到的，我使用JQuery将Dropzone附加到upload1 div ID。

但是在下面的示例中，我使用AJAX加载upload1 div： http://www.dressorganic.co.uk/dropzone-test/withajax.htm

不幸的是我无法让Dropzone附加到DIV。我知道我可以在包含要加载的HTML的singleproductupload.asp中插入JQuery。但我更喜欢在父页面中使用JQuery。

以下是主要的HTML页面：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Dropzone with AJAX</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/dropzone-test/dropzone/4.0.1/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="/dropzone-test/dropzone/4.0.1/dist/min/dropzone.min.css">

<script type="text/javascript">
//<![CDATA[
$(function() {

$("#upload1").dropzone({url: "/dropzone-test/handleupload.asp"});

$.ajax({
  type: 'POST',
  url: "/dropzone-test/singleproductload.asp",
  data: { ID: '1' },
  success: function(result) {
    $("#singleproductload").append(result);

  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
     alert(textStatus + ": " + errorThrown);
  },

  async:true
});     


});  // JQuery
//]]>
</script>

</head>

<body>

    <div id="singleproductload">

    </div>

</body>
</html>

这是在AJAX中加载的HTML页面：

<div id="upload1" class="dropzone">

   <p>File uploader</p>

</div>

Answer 1

我现在解决了这个问题： http://www.dressorganic.co.uk/dropzone-test/withajax-solution.htm

我必须更改AJAX代码以在成功回调中声明Dropzone：

$.ajax({
  type: 'POST',
  url: "/dropzone-test/singleproductload.asp",
  data: { ID: '1' },
  success: function(result) {
    $("#singleproductload").append(result);
    $("#upload1").dropzone({url: "/dropzone-test/handleupload.asp"});
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
     alert(textStatus + ": " + errorThrown);
  },

  async:true
});

无法将Dropzone附加到加载AJAX的DIV

1 个答案: