Wie ändere ich den Standardtext in dropzone.js?

Question 1

Ich verwende 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.

Ich habe folgendes getestet:

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

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

Question 2

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

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

Question 3

Sie können alle Standardnachrichten folgendermaßen ändern :

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

Question 4

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'});

Question 5

Dieser Text befindet sich in der Standardkonfiguration von dropzone. Sie können Folgendes überschreiben:

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

Question 6

mydzFügen Sie Ihrem Formular zuerst eine ID hinzu , und fügen Sie dann Folgendes 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="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>

Question 7

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

Question 8

Ich habe stundenlang damit herumgespielt.

Aus irgendeinem Grund mussten diese drei Dinge getan werden:

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

Dropzone.autoDiscover = false;

So initialisieren Sie:

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.

Question 9

Zum Lokalisieren von Dropzone in Asp.Net Razor Pages verwende ich die folgende Methode, um dekodierte Zeichen zu vermeiden:

Erstellen Sie ein HTML-Element für alle Nachrichten

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

Binden Sie dann Nachrichten an das Dropzone-Element:

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

Ein vollständiges Beispiel für das Hochladen von Drag-Drop-Dateien mit Dropzone finden Sie in diesem GitHub-Repository: https://github.com/LazZiya/FileUpload

Question 10

Wenn Sie JQuery nicht ablehnen, wird das Standardbild ausgeblendet:

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

und dies zeigt die Standardspanne an, die Sie ändern können, um zu sein, was Sie wollen:

$('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.');

Question 11

in der css von dropzone suchen

.dropzone .dz-default.dz-message

in dieser Klasse löschen

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

Als nächstes müssen Sie diese Klasse durchsuchen

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

und ändern Sie es in Anzeige: Block

Question 12

Wenn Sie Dropzones programmgesteuert erstellen, müssen Sie Ihre Optionen wie folgt festlegen:

Dropzone.autoDiscover = false;

profilePicture = new Dropzone('#profile-picture', {
    url: "/uploadPicture.php",

    // if you are using laravel ..., you dont need to put csrf in meta tag
    headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },

    dictDefaultMessage: "Your default message Will work 100%",

    /other options
    paramName: "profile_picture",
    addRemoveLinks: true,
    maxFilesize: 1,
    maxFiles: 10,

    dictRemoveFile: "Remove",

});

Wenn Sie es so verwenden, wird es nicht funktionieren ...

let myDropzone = new Dropzone("#profile-picture", {

    url: "/uploadPicture.php",
    // if you are using laravel ..., you dont need to put csrf in meta tag
    headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },

});

myDropzone.options.profilePicture = {

    dictDefaultMessage: "This message not gonna work",

    paramName: "profile_picture",
};