我是网络开发的新手，正在尝试实现文件上传区域网格。
我正在使用 DropZone.js对于我正在 build 的网站。我已经格式化了 DropZone 并在 html 中创建了额外的 DropZones。我有四行四行，创建一个网格。这些中的每一个都在 JavaScript 中调用相同的父级。在每个区域中都有一条默认消息:
“将文件拖放到此处进行上传”
我想改变这个。事实上，我希望每个实例都有一个单独的描述。此网格中的每个区域都有一个独特的描述。
我想知道的是，我到底应该怎么做？
我已经包含了站点的 html、dropzone.js 的 .js 和 .css。
我能否在 JavaScript 中调用 html 中的元素并让它从 javascript 中操作 dictDefaultMessage: "Drop files here to upload", 以创建与元素被调用？
dropzones 都调用同一个父级，我不想制作 16 个不同的 dropzone.js 来完成这项工作。
我是网络开发的新手，非常感谢深入的解释。
谢谢。
Dropzone.prototype.defaultOptions = {
url: null,
method: "post",
withCredentials: false,
parallelUploads: 2,
uploadMultiple: false,
maxFilesize: 256,
paramName: "file",
createImageThumbnails: true,
maxThumbnailFilesize: 10,
thumbnailWidth: 120,
thumbnailHeight: 120,
filesizeBase: 1000,
maxFiles: null,
params: {},
clickable: true,
ignoreHiddenFiles: true,
acceptedFiles: null,
acceptedMimeTypes: null,
autoProcessQueue: true,
autoQueue: true,
addRemoveLinks: false,
previewsContainer: null,
hiddenInputContainer: "body",
capture: null,
renameFilename: null,
dictDefaultMessage: "Drop files here to upload",
dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.",
dictFallbackText: "Please use the fallback form below to upload your files like in the olden days.",
dictFileTooBig: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
dictInvalidFileType: "You can't upload files of this type.",
dictResponseError: "Server responded with {{statusCode}} code.",
dictCancelUpload: "Cancel upload",
dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?",
dictRemoveFile: "Remove file",
dictRemoveFileConfirmation: null,
dictMaxFilesExceeded: "You can not upload any more files.",
accept: function(file, done) {
return done();
},<title>Zone #16</title>
<script src="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.js"></script>
<link rel="stylesheet" href="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.css">
<p style="color:rgb(4,0,84)" align="center"> Drop your file in the appropriate zone. There are 16 zones to choose from </p>
<!-- Change /upload-target to your upload address -->
<form action="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI" class="dropzone"></form>
<title>Zone #</title>
<script src="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.js"></script>
<link rel="stylesheet" href="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.css">
<!-- Change /upload-target to your upload address -->
<form action="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI" class="dropzone"></form>最佳答案
首先，您只需在 header 中包含一次脚本和样式表。只要确保您将脚本放在 header 中，它就是 with async .
HTML
<head>
<!-- Stylesheet goes here -->
<!-- Script goes here -->
</head>
现在对于您的每个表单，您需要为它们提供一个唯一的 ID。这将让您的 JavaScript 知道哪个 ID 应该得到哪个框。
HTML
<form action="" class="dropzone" id="zone16"></form>
最后，要给每个区域一个唯一的名字，你只需要改变dictDefaultMessage。
你这样做是这样的:
JavaScript
Dropzone.options.zone16 {
dictDefaultMessage: "This is the sixteenth zone!"
}
关于javascript - 调用 html 元素并在 JavaScript 中对其进行操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38622323/