如何启用 Dropzone 选项? autoDiscover 破坏了 Dropzone 功能。
How do you enable Dropzone options? autoDiscover breaks Dropzone functionality.
因此,我尝试按照此处的解决方案进行操作:
Dropzone image upload options not working :(
但是,每当我提供选项时:
Dropzone.autoDiscover = false;
拖放区从显示默认的拖放外观变为仅显示带有 "Browse" 按钮的文本。
这是我的代码(dropzone 包含在 header 中):
<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>
所以,问题是,如何在不破坏默认外观的情况下为 dropzone 指定选项?
我自己想出来了。我是 ASP.NET Web 表单的新手,忘记了 Javascript 是客户端,因此引用了客户端与服务器端不同的元素 ID。我查看了源代码,发现表单的 ID 是 "aspnetForm",所以我将选项代码更改为:
Dropzone.options.aspnetForm = {
uploadMultiple: false,
maxFiles: 1,
maxFilesize: 5000,
等等
现在可以使用了!
祝你好运
@{
}
<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>
}
四个选项:
- 不要在您的表单中使用 class
.dropzone
,这样自动发现就不会拾取它。如果您想使用默认值 CSS ,那会让您一头雾水
- 使用
Dropzone.autoDiscover = false;
- 通过设置 Dropzone.options.${formname} 加载后访问选项,其中 formname 是表单的驼峰 ID。
- 加载后通过附加到元素的 dropzone 属性 访问选项。
document.querySelector(formname).dropzone.options
- 您可以通过索引访问它:
Dropzone.instances[0].options
如果你使用后面的步骤(正如他们网站所推荐的那样),你还可以在元素上设置诸如 URL 之类的选项,并通过以下方式合并选项:
let dz = document.querySelector(formname).dropzone
dz.options = { ...dz.options, ...{ myopts } }
因此,我尝试按照此处的解决方案进行操作:
Dropzone image upload options not working :(
但是,每当我提供选项时:
Dropzone.autoDiscover = false;
拖放区从显示默认的拖放外观变为仅显示带有 "Browse" 按钮的文本。
这是我的代码(dropzone 包含在 header 中):
<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>
所以,问题是,如何在不破坏默认外观的情况下为 dropzone 指定选项?
我自己想出来了。我是 ASP.NET Web 表单的新手,忘记了 Javascript 是客户端,因此引用了客户端与服务器端不同的元素 ID。我查看了源代码,发现表单的 ID 是 "aspnetForm",所以我将选项代码更改为:
Dropzone.options.aspnetForm = {
uploadMultiple: false,
maxFiles: 1,
maxFilesize: 5000,
等等
现在可以使用了!
祝你好运
@{
}
<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>
}
四个选项:
- 不要在您的表单中使用 class
.dropzone
,这样自动发现就不会拾取它。如果您想使用默认值 CSS ,那会让您一头雾水
- 使用
Dropzone.autoDiscover = false;
- 通过设置 Dropzone.options.${formname} 加载后访问选项,其中 formname 是表单的驼峰 ID。
- 加载后通过附加到元素的 dropzone 属性 访问选项。
document.querySelector(formname).dropzone.options
- 您可以通过索引访问它:
Dropzone.instances[0].options
如果你使用后面的步骤(正如他们网站所推荐的那样),你还可以在元素上设置诸如 URL 之类的选项,并通过以下方式合并选项:
let dz = document.querySelector(formname).dropzone
dz.options = { ...dz.options, ...{ myopts } }