Wie ändere ich den Standardtext in dropzone.js?

Lesezeit: 4 Minuten

Benutzer-Avatar
Sheldon

ich benutze dropzone.js um Dateien hochzuladen. Ich habe jedoch Schwierigkeiten, den Standardtext zu ändern.

Ich habe versucht, die Dropzone-Klasse zu instanziieren:

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

Mit diesem Markup:

    <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>

Dies gibt mir sicherlich die Möglichkeit, Dateien hochzuladen, aber der Standardtext ist leer.

Folgendes habe ich getestet:

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

und ich scheine das gleiche Ergebnis zu erhalten – kein Standardtext. Also … wie ändere ich den Standardtext?

Fügen Sie wie folgt ein Element in Ihrem Dropzone-Formular hinzu:

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

  • Ich kann bestätigen, dass dies funktioniert, während das Ändern von “dictDefaultMessage” als Einstellung nichts zu bewirken scheint. Dies liegt hauptsächlich daran, dass der Text durch ein Bild mit Text ersetzt wird.

    – Florian Rachor

    30. April 2015 um 14:52 Uhr


  • Das funktioniert, aber was tun für alle anderen Arten von Nachrichten? Es gibt eine riesige Lücke in der Dokumentation

    – T-moty

    29. November 2016 um 22:32 Uhr

  • Das ist Arbeit, ABER ich muss nur auf den Text klicken, um den Dateiupload-Dialog anzuzeigen. Das Klicken außerhalb des Textes zeigt jetzt den Dateiupload an

    – Hakan Faustik

    10. Januar 2017 um 15:47 Uhr

  • Ich verwende das HTML-Tag und habe keine andere Option, da ich mich in einem eckigen Projekt befinde. Platzieren der oben genannten Funktion funktioniert nicht.

    – tatsu

    13. Juni 2018 um 16:07 Uhr


Sie können alle ändern Standardnachrichten mit diesem:

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.";

  • Siehe Liste aller Nachrichtenschlüssel hier: dropzonejs.com/#config-dictDefaultMessage

    – tuomassalo

    2. Mai 2018 um 19:17 Uhr

  • Jetzt müssen Sie dies verwenden – Dropzone.options.dictDefaultMessage = “Dateien zum Hochladen hier ablegen”;

    – Kann Ali

    13. Dezember 2021 um 7:27 Uhr


Benutzer-Avatar
Firze

Beim Erstellen der Dropzone können Sie die Standardnachricht wie folgt festlegen.

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

Dann

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

Benutzer-Avatar
Ollicca Gedankensturm

Fügen Sie Ihrem Formular zuerst eine ID hinzu, sagen wir mydzdann fügen Sie dieses js hinzu:

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

Die ganze Seite (in diesem Fall index.php):

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

<head>
<meta charset="utf-8">
<script src="https://stackoverflow.com/questions/17702394/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>

Dieser Text befindet sich in der Standardkonfiguration von Dropzone. Sie können ihn folgendermaßen überschreiben:

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

  • Vielen Dank! Ich musste die Nachricht wirklich nicht ändern, aber das ist das einzige, was mir geholfen hat, die Standardoptionen zu ändern ☺

    – Silvester

    10. Juni 2016 um 20:15 Uhr

Benutzer-Avatar
Eduardo Paz

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()
    {
     ....

  • Vielen Dank! Ich musste die Nachricht wirklich nicht ändern, aber das ist das einzige, was mir geholfen hat, die Standardoptionen zu ändern ☺

    – Silvester

    10. Juni 2016 um 20:15 Uhr

Benutzer-Avatar
Glück.Experte

Ich habe stundenlang damit herumgespielt.

Aus irgendeinem Grund mussten diese 3 Dinge getan werden:

  1. Meine Dropzone-Tags konnten sich nicht auf derselben Seite befinden, auf der ich Dropzone verwendet habe. Ich musste sie auf der Vorlagenseite referenzieren
  2. Das Element, das Sie in eine Dropzone verwandeln, muss die Klasse „Dropzone“ haben.
  3. Sie müssen Folgendes am Anfang der js-Datei für die Seite hinzufügen, an der ich gearbeitet habe.

Dropzone.autoDiscover = false;

Initialisieren:

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

Sobald ich alle 3 in Ordnung hatte, funktionierte die Option dictDefaultMessage.

1157950cookie-checkWie ändere ich den Standardtext in dropzone.js?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy