Come cambio il testo predefinito in dropzone.js?

Sto usando dropzone.js per caricare file. Tuttavia, ho difficoltà a cambiare il testo predefinito.Come cambio il testo predefinito in dropzone.js?

Ho provato un'istanza della classe zona di lancio:

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

Con questa marcatura:

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

Questo mi dà certamente la possibilità di caricare file, ma il testo predefinito è vuoto.

ho verificato le seguenti:

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

e mi sembrano ottenere lo stesso risultato - nessun testo predefinito. Quindi ... come cambio il testo predefinito?

fonte

2013-07-17 Sheldon

107

Aggiungere un elemento all'interno della vostra zona di lancio modulo come segue:

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

fonte

2014-04-10 15:27:30 spedley

Posso confermare che questo funziona, mentre si modifica "dictDefaultMessage" come un'impostazione sembra non fare nulla. Questo è principalmente dovuto al fatto che il testo viene sostituito con un'immagine che contiene del testo. –

Questo lavoro, ma cosa fare per tutti gli altri tipi di messaggi? C'è un enorme buco nella documentazione –

questo è lavoro, MA, questo mi obbliga a cliccare solo il testo per mostrare la finestra di dialogo del fileupload. il click all'esterno del testo mostra ora il fileupload –

Se non si è avversa a JQuery, questo nascondere l'immagine di default:

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

e, questo mostrerà il intervallo predefinito che puoi modificare per essere quello che vuoi:

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

fonte

2014-05-14 15:25:10 quillbreaker

nel css di dropzone cercare

.dropzone .dz-default.dz-message

in questa classe eliminare

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

la prossima cosa da fare è cercare questa classe

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

e modificarlo in display: block

fonte

2014-05-15 19:50:25

Durante la creazione della zona di lancio si può impostare il messaggio predefinito come questo.

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

Poi

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

fonte

2015-01-13 15:27:29 Firze

Prima aggiungere un id al modulo, dire mydz, quindi aggiungere questo js:

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

L'intera pagina (indice.php in questo caso):

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

fonte

2015-09-11 11:24:43

Questo è ciò che dice la documentazione, ma sfortunatamente non funziona per me –

Hai aggiunto un id al tuo modulo? Se l'hai fatto, non può non funzionare. Aggiungi il dropzone.js all'inizio della pagina e il JS che ti ho dato in fondo alla pagina, e deve funzionare. –

Ho appena aggiornato il mio post con l'intera pagina, copia incolla che, includi i file rilevanti, e vediamo se funziona. –

questo testo è in configurazione di default di dropzone, è possibile sovrascrivere in questo modo:

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

fonte

2016-03-04 11:11:37 tientoantai

Grazie! Non ho davvero bisogno di cambiare il messaggio, ma questa è l'unica cosa che mi ha aiutato a cambiare le opzioni predefinite ☺ – Silvestre

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

fonte

2016-05-17 03:33:46

Ciao! Benvenuto in StackOverflow! Quando rispondi alle domande, invece di limitarti a fornire il codice, ti preghiamo di spiegarlo. Leggi la guida per rispondere alle domande [qui] (http://stackoverflow.com/help/how-to-answer) – ayushgp

È possibile modificare tutte messaggi predefiniti con questo:

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

fonte

2016-08-03 00:33:54

Come cambio il testo predefinito in dropzone.js?

risposta

Problemi correlati