Question

我是网络开发的新手，正在尝试实施文件上传区域网格。

我正在使用DropZone.js作为我正在构建的网站。我已经格式化了DropZone并在html中创建了其他DropZones。我有四行四个，创建一个网格。其中每个都在JavaScript中调用相同的父级。每个区域内都有一条默认消息：

“将文件拖放到上传”

我想改变这个。实际上我希望每个实例都有一个单独的描述。此网格中的每个区域都有唯一的描述。

我想知道的是，我到底该怎么做呢？

我已经包含了网站的html，.js和.css for dropzone.js。

我是否可以从JavaScript中的html调用一个元素并让它从javascript中操作dictDefaultMessage: "Drop files here to upload",来创建与被调用元素相关的新文本？

dropzones都调用同一个父节点，我不想制作十六个不同的dropzone.j来使这个工作。

我是网络开发的新手，非常感谢深入的解释。

谢谢。

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>

Answer 1

首先，您只需要在标题中包含一次脚本和样式表。只需确保将脚本放在标题中，即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!"
}

Answer 2

defaultValues more看起来像是配置的备份，用于设置默认值。

你可以在javascript中操作html（DOM）对象

首先你必须得到你的对象。

＆＃13;

//Via Id
var obj = document.getElementById("EnterIdHere");
//Via Class
var obj = document.getElementByClassName("EnterClassNameHere"); //unsure for correct spelling

＆＃13;

接下来，您可以访问DOM-Object并对其进行操作。

＆＃13;

var obj = document.getElementById("divExample");

obj.style.backgroundColor = "green"; //Do a CSS action

obj.classList.toggle("Crap", false); //Disable CSS-Class Crap

obj.innerHTML = "New Content"; //Labeling it

＆＃13;

基础教程：http://callmenick.com/post/basics-javascript-dom-manipulation

调用html元素并在JavaScript中操作它

2 个答案: