【问题标题】:How to create a dropzone in my div element?如何在我的 div 元素中创建放置区?
【发布时间】:2016-09-26 05:39:38
【问题描述】:

注意事项:我厌倦了所有与此主题相关的问题和答案。

我使用form 标签然后工作完全正常。见代码Here

我想在我的div 标签中“放置”一个拖放区,但不知何故它不起作用。见代码here

片段示例如下。

Dropzone.autoDiscover = false;
$("#mydropzone").dropzone({
    //url: "/file/post",
	addRemoveLinks: true,
	maxFilesize: 0.5,
	dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>&nbsp&nbsp<h4 class="display-inline"> (Or Click)</h4></span>',
	dictResponseError: 'Error uploading file!'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/basic.css" rel="stylesheet"/>

<div class="clsbox-1" runat="server">
    <div class="dropzone clsbox" id="mydropzone">

    </div>
</div>

【问题讨论】:

  • 你检查过开发者控制台吗?它说:“未捕获的错误:未提供 URL。”
  • ya .. 因为我使用div 标签。我使用form 标签然后删除错误。但我想在 div 标签中放置区域。
  • 为什么坚持不在&lt;form&gt;标签上使用它?
  • 我的应用程序要求然后我使用 div 标签因为我已经在我的表单中使用了form 标签。然后我第二次使用然后没有工作并发生错误。
  • 我得到了答案。之后我在 Dropzone 的研究中获得了最好的解决方案

标签: dropzone.js


【解决方案1】:

经过长时间的研究,我终于找到了最好的解决方案。


HTML

<div class="clsbox-1" runat="server"  >
    div class="dropzone clsbox" id="mydropzone">

    </div>
</div>

JavaScript

Dropzone.autoDiscover = false;

// Dropzone class:
var myDropzone = new Dropzone("div#mydropzone", { url: "/file/post"});

// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });

JSFiddle 演示 Here

【讨论】:

  • 我无法让它与最新版本的 dropzone 一起工作 =/。我不明白为什么把它放在一个 div 而不是一个表单中这么难=/
猜你喜欢
  • 1970-01-01
  • 2018-09-26
  • 2012-09-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-05-21
  • 1970-01-01
  • 2016-09-05
相关资源
最近更新 更多