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

Question

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

98

我正在使用dropzone.js上传文件，但是我无法更改默认文本。

我已经尝试实例化dropzone类：

$(document).ready(function(){
  $(".foo").dropzone({ dictDefaultMessage: "hello" });
});

使用以下标记：

    <div class="span4">
      <form action="http://localhost/post" method="post" accept-charset="utf-8" id="drop3" class="foo" enctype="multipart/form-data"> </form>
    </div>
    <div class="span4">
      <form action="http://localhost/post" method="post" accept-charset="utf-8" id="drop4" class="foo" enctype="multipart/form-data"> </form>
  </div>

这确实使我有能力上传文件，但默认文本为空。

我测试了以下内容：

 $(".foo").dropzone();

我的情况与你类似，也没有默认文本。那么我该如何更改默认文本呢？

- Sheldon

11个回答

101

您可以使用以下方法更改所有的默认消息：

Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop files here to upload";
Dropzone.prototype.defaultOptions.dictFallbackMessage = "Your browser does not support drag'n'drop file uploads.";
Dropzone.prototype.defaultOptions.dictFallbackText = "Please use the fallback form below to upload your files like in the olden days.";
Dropzone.prototype.defaultOptions.dictFileTooBig = "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.";
Dropzone.prototype.defaultOptions.dictInvalidFileType = "You can't upload files of this type.";
Dropzone.prototype.defaultOptions.dictResponseError = "Server responded with {{statusCode}} code.";
Dropzone.prototype.defaultOptions.dictCancelUpload = "Cancel upload";
Dropzone.prototype.defaultOptions.dictCancelUploadConfirmation = "Are you sure you want to cancel this upload?";
Dropzone.prototype.defaultOptions.dictRemoveFile = "Remove file";
Dropzone.prototype.defaultOptions.dictMaxFilesExceeded = "You can not upload any more files.";

- Sergio Cabral

5

请点击此处查看所有消息键的列表：http://www.dropzonejs.com/#config-dictDefaultMessage - tuomassalo

4

现在，您需要使用这个代码：Dropzone.options.dictDefaultMessage = "将文件拖放到此处上传"; 该代码用于设置Dropzone插件的默认提示信息为“将文件拖放到此处上传”。 - Can Ali

45

创建拖放区时，您可以像这样设置默认消息。

var dropzone = new Dropzone("form.dropzone", {
   dictDefaultMessage: "Put your custom message here"
});

那么

$('div.dz-default.dz-message > span').show(); // Show message span
$('div.dz-default.dz-message').css({'opacity':1, 'background-image': 'none'});

- Firze

12

首先给你的表单添加一个id，比如mydz，然后添加这个JS代码：

Dropzone.options.mydz = {
    dictDefaultMessage: "your custom message"
};

整个页面（在本例中为index.php）：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<script src="dropzone.js"></script>
<link rel="stylesheet" type="text/css" href="./dropzone.css">
<title></title>

</head>

<body>

<form action="upload.php" class="dropzone" id="mydz"></form>
<script type="text/javascript">

Dropzone.options.mydz = {
    dictDefaultMessage: "Put your custom message here"
};


</script>

</body>
</html>

- Ollicca Mindstorm

3

这是文件说明所说的，但不幸的是对我没有用。 - Victor Laerte

1

你在表单中添加了id吗？如果添加了，它就不能不工作。将dropzone.js添加到页面顶部，将我给你的JS添加到页面底部，它一定会工作。 - Ollicca Mindstorm

我刚刚更新了我的帖子，包括整个页面，请复制粘贴，并包含相关文件，看看是否有效。 - Ollicca Mindstorm

10

这段文字是使用Dropzone的默认配置，您可以像这样进行覆盖：

Dropzone.prototype.defaultOptions.dictDefaultMessage = "Your text";

- tientoantai

1

谢谢！我其实不需要改变消息，但这是唯一帮助我改变默认选项的方法☺ - Silvestre

8

myDropzonePhotos = new Dropzone('#dropzone-test',
{
    url                : 'upload_usuario.php?id_usuario=' + id_usuario,
    maxFiles           : 1, 
    thumbnailWidth     : 1200,
    thumbnailHeight    : 300,
    dictDefaultMessage : 'Change the text here!',
    init: function()
    {
     ....

- Eduardo Paz

4

嗨！欢迎来到StackOverflow！回答问题时，请不要仅提供代码，还要解释它。阅读回答问题的指南[此处]（http://stackoverflow.com/help/how-to-answer）。 - ayushgp

6

我纠结了几个小时。

由于某些原因，需要完成以下三件事情：

我的dropzone标签不能在我正在使用dropzone的同一页面上。我必须在模板页面上引用它们。
将要转换为dropzone的元素必须具有“dropzone”类。
您必须在我正在工作的页面的js文件顶部添加以下内容。

Dropzone.autoDiscover = false;

初始化：

var myDropzone = new Dropzone("#id-upload-dropzone", {
    url: "/home/Upload",
    dictDefaultMessage: 'Drop image here (or click) to capture/upload'
});

一旦我把这三个东西都整理好了，dictDefaultMessage选项就起作用了。

- lucky.expert

4

为了在Asp.Net Razor Pages中本地化Dropzone，我使用以下方法来避免解码字符：

创建所有消息的HTML元素。

<!-- localization elements -->

<div class="modal" aria-hidden="true">

    <span id="dictDefaultMessage">@_localizer["Drop files here or click to upload."]</span>

    <span id="dictFallbackMessage">@_localizer["Your browser does not support drag'n'drop file uploads."]</span>

    <span id="dictFallbackText">@_localizer["Please use the fallback form below to upload your files like in the olden days."]</span>

    <span id="dictFileTooBig">@_localizer["File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB."]</span>

    <span id="dictInvalidFileType">@_localizer["You can't upload files of this type."]</span>

    <span id="dictResponseError">@_localizer["Server responded with {{statusCode}} code."]</span>

    <span id="dictCancelUpload">@_localizer["Cancel upload"]</span>

    <span id="dictCancelUploadConfirmation">@_localizer["Are you sure you want to cancel this upload?"]</span>

    <span id="dictUploadCanceled">@_localizer["Upload canceled."]</span>

    <span id="dictRemoveFile">@_localizer["Delete"]</span>

    <span id="dictRemoveFileConfirmation">@_localizer["Are you sure you want to delete this file?"]</span>

    <span id="dictMaxFilesExceeded">@_localizer["You can not upload any more files."]</span>

    <span id="dictFileSizeUnits_TB">@_localizer["TB"]</span>

    <span id="dictFileSizeUnits_GB">@_localizer["GB"]</span>

    <span id="dictFileSizeUnits_MB">@_localizer["MB"]</span>

    <span id="dictFileSizeUnits_KB">@_localizer["KB"]</span>

    <span id="dictFileSizeUnits_b">@_localizer["b"]</span>

</div>

然后将消息绑定到 Dropzone 元素：

<script>
// get elements for localization

        with (Dropzone.prototype.defaultOptions) {

            dictDefaultMessage = document.getElementById("dictDefaultMessage").innerText;

            dictFallbackMessage = document.getElementById("dictFallbackMessage").innerText;

            dictFallbackText = document.getElementById("dictFallbackText").innerText;

            dictFileTooBig = document.getElementById("dictFileTooBig").innerText;

            dictInvalidFileType = document.getElementById("dictInvalidFileType").innerText;

            dictResponseError = document.getElementById("dictResponseError").innerText;

            dictCancelUpload = document.getElementById("dictCancelUpload").innerText;

            dictCancelUploadConfirmation = document.getElementById("dictCancelUploadConfirmation").innerText;

            dictUploadCanceled = document.getElementById("dictUploadCanceled").innerText;

            dictRemoveFile = document.getElementById("dictRemoveFile").innerText;

            dictRemoveFileConfirmation = document.getElementById("dictRemoveFileConfirmation").innerText; // if this is null, the user will not be prompted when deleting file.

            dictMaxFilesExceeded = document.getElementById("dictMaxFilesExceeded").innerText;

            dictFileSizeUnits = {

                tb: document.getElementById("dictFileSizeUnits_TB").innerText,

                gb: document.getElementById("dictFileSizeUnits_GB").innerText,

                mb: document.getElementById("dictFileSizeUnits_MB").innerText,

                kb: document.getElementById("dictFileSizeUnits_KB").innerText,

                b: document.getElementById("dictFileSizeUnits_b").innerText

            };

        };

</script>

如果您需要完整的拖放文件上传示例，请参阅此GitHub存储库：https://github.com/LazZiya/FileUpload

- LazZiya

3

在Dropzone的CSS中查找

，

标签。

.dropzone .dz-default.dz-message

在这个类中删除。

background-image: url("../images/spritemap.png");

接下来要做的是搜索这个类

.dropzone .dz-default.dz-message span {
  display: none;
}

并将其更改为display:block

- Snick MB

2

如果您对 JQuery 不反感，这段代码可以隐藏默认图片:

$('form.dropzone').find('div.default.message').css('background-image','none');

同时，这将显示默认的跨度（span），您可以更改为任何您想要的内容：

$('form.dropzone').find('div.default.message').find('span').show();
$('form.dropzone').find('div.default.message').find('span').empty();
$('form.dropzone').find('div.default.message').find('span').append('Drop files here or click here to upload an image.');

- quillbreaker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- supernifty · Accepted Answer

217

按照以下方式在您的拖放区表单中添加一个元素：

<div class="dz-message" data-dz-message><span>Your Custom Message</span></div>

- supernifty

7

我可以确认这个方法可行，但是更改“dictDefaultMessage”设置似乎没有任何作用。这主要是因为文本被替换为带有文本的图像。 - Florian Rachor

4

这个工作没问题，但是其他类型的信息怎么办呢？文档中有一个巨大的漏洞。 - T-moty

这是可以工作的，但是它强制我只能点击文本才能显示文件上传对话框。在文本外面点击现在不会显示文件上传。 - Hakan Fıstık

我正在使用<dropzone>HTML标签，并且没有其他选项，因为我在一个Angular项目中。将以上内容放置在其中并不起作用。 - tatsu