85

ファイルのアップロードに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();

そして、同じ結果が得られるようです-デフォルトのテキストはありません。では、デフォルトのテキストを変更するにはどうすればよいですか?

4

11 に答える 11

196

次のように、dropzone フォーム内に要素を追加します。

<div class="dz-message" data-dz-message><span>Your Custom Message</span></div>
于 2014-04-10T15:27:30.757 に答える
86

これですべてのデフォルトメッセージを変更できます：

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.";
于 2016-08-03T00:33:54.263 に答える
42

ドロップゾーンを作成するとき、このようにデフォルトのメッセージを設定できます。

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'});
于 2015-01-13T15:27:29.507 に答える
11

最初に id をフォームに追加してから、次のmydzjs を追加します。

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>
于 2015-09-11T11:24:43.570 に答える
10

このテキストは dropzone のデフォルト設定にあります。次のように上書きできます。

Dropzone.prototype.defaultOptions.dictDefaultMessage = "Your text";
于 2016-03-04T11:11:37.483 に答える