📌  相关文章
📜  如何更改 dropzone.js 中的默认文本? - HTML(1)

📅  最后修改于: 2023-12-03 15:09:09.971000             🧑  作者: Mango

如何更改 dropzone.js 中的默认文本？

在使用 dropzone.js 时，当我们的拖拽区域没有文件时会显示默认的提示文本。但是有时候默认的文本可能不符合我们的需求，因此我们需要进行更改。本文将介绍如何更改 dropzone.js 中的默认文本。

文件上传示例

让我们先来看一个简单的文件上传示例，使用默认的文本。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
</head>
<body>
  <form action="/file-upload" class="dropzone">
    <div class="fallback">
      <input name="file" type="file" multiple />
    </div>
  </form>
</body>
</html>

当我们将文件拖拽到上面的区域中，提示文本会显示 Drop files here to upload，如下所示：

默认提示文本

但是如果我们想要将提示文本更改为我们自己的内容，应该怎么做呢？

更改默认文本

我们可以使用 dictDefaultMessage 属性来更改默认的提示文本。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
</head>
<body>
  <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
  
  <script type="text/javascript">
    Dropzone.options.myAwesomeDropzone = {
		dictDefaultMessage: '拖拽文件到这里上传',
	};
  </script>
</body>
</html>

在这个示例中，我们使用了 Dropzone.options 来指定 dictDefaultMessage 属性来将提示文本更改为了 拖拽文件到这里上传。运行代码，当我们将文件拖拽到区域中时，提示文本将会更改。

更改后的提示文本

小结

以上就是如何更改 dropzone.js 中的默认文本的方法。只需简单地设置 dictDefaultMessage 属性即可完成更改，非常方便。