javascript 你如何启用 Dropzone 选项？autoDiscover 打破了 Dropzone 的功能。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29898429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you enable Dropzone options? autoDiscover breaks Dropzone functionality.
提问by Joshua Kemmerer
So, I tried following the solution here:
因此，我尝试按照此处的解决方案进行操作：
Dropzone image upload options not working :(
but, whenever I provide the option:
但是，每当我提供选项时：
Dropzone.autoDiscover = false;
the dropzone goes from displaying the default drag'n'drop look to just text with a "Browse" button.
dropzone 从显示默认的拖放外观变为带有“浏览”按钮的文本。
Here is my code (dropzone is included in header):
这是我的代码（dropzone 包含在标题中）：
<script type="text/javascript">
$(document).ready(function () {
Dropzone.autoDiscover = false;
$("#uploadme").dropzone({
maxFilesize: 5000,
dictDefaultMessage: "Drop your file here to upload (multiple files require being zipped)",
uploadMultiple: false,
addRemoveLinks: true
});
});
</script>
<h5>Test space for FTP</h5>
<asp:Label ID="lblError" runat="server"></asp:Label>
<div class="mainContent">
<form runat="server" method="post" enctype="multipart/form-data"
class="dropzone"
id="ftpUpload">
<div class="fallback" id="uploadme">
<input type="file" name="file" multiple />
<input type="submit" value="Upload" />
</div>
</form>
</div>
So, the question is, how do I specify options for dropzone without ruining the default look?
所以，问题是，如何在不破坏默认外观的情况下为 dropzone 指定选项？
采纳答案by Joshua Kemmerer
I figured it out myself. I'm fairly new to ASP.NET Web Forms and forgot that Javascript is client-side and therefore references element IDs which are different on the client-side than server-side. I viewed the source and found that the form's ID is "aspnetForm", so I changed my options code to:
我自己想通了。我对 ASP.NET Web 窗体还很陌生，忘记了 Javascript 是客户端，因此引用的元素 ID 在客户端与服务器端不同。我查看了源码，发现表单的ID是“aspnetForm”，于是我将选项代码改为：
Dropzone.options.aspnetForm = {
uploadMultiple: false,
maxFiles: 1,
maxFilesize: 5000,
etc.
等等。
Now it works!
现在它起作用了！
回答by Cemal Can AKGüL
Good luck with
祝你好运
@{
}
<div id="dropzone">
<form action="/Photo/Upload" class="dropzone" id="uploader" enctype="multipart/form-data"></form>
</div>
@section Styles{
<link rel="stylesheet" type="text/css" href="~/lib/dropzone/dist/basic.css" />
<link rel="stylesheet" type="text/css" href="~/lib/dropzone/dist/dropzone.css" />
}
@section Scripts{
<script src="~/lib/dropzone/dist/dropzone.js"></script>
<script>
Dropzone.autoDiscover = false;
window.onload = function () {
var dropzoneOptions = {
dictDefaultMessage: 'Drop Here!',
paramName: "file",
maxFilesize: 2, // MB
addRemoveLinks: true,
init: function () {
this.on("success", function (file) {
console.log("success > " + file.name);
});
}
};
var uploader = document.querySelector('#uploader');
var newDropzone = new Dropzone(uploader, dropzoneOptions);
console.log("Loaded");
};
</script>
}
回答by SamGoody
Four options:
四个选项：
- Don't use class
.dropzonein your form, so that autodiscover doesn't pick it up. That will mess you up, if you wish to use the default CSS - Use
Dropzone.autoDiscover = false; - Access the options after load by setting Dropzone.options.${formname} where formname is the camelCased ID of the form.
- Access the options after load via the dropzone property attached to the element.
document.querySelector(formname).dropzone.options - You can access it via index at:
Dropzone.instances[0].options
- 不要
.dropzone在你的表单中使用 class ，这样自动发现就不会选择它。如果你想使用默认的 CSS，那会让你一团糟 - 利用
Dropzone.autoDiscover = false; - 加载后通过设置 Dropzone.options.${formname} 访问选项，其中 formname 是表单的驼峰式 ID。
- 通过附加到元素的 dropzone 属性访问加载后的选项。
document.querySelector(formname).dropzone.options - 您可以通过索引访问它：
Dropzone.instances[0].options
If you use the latter steps (as is recommended by their site), you can also set options such as the URL on the element, and merge the options via:
如果您使用后面的步骤（正如他们的网站所推荐的那样），您还可以设置诸如元素上的 URL 之类的选项，并通过以下方式合并选项：
let dz = document.querySelector(formname).dropzone
dz.options = { ...dz.options, ...{ myopts } }
