Làm cách nào để thay đổi văn bản mặc định trong dropzone.js?

Tôi đang sử dụng dropzone.js để tải tệp lên. Tuy nhiên, tôi gặp khó khăn khi thay đổi văn bản mặc định.Làm cách nào để thay đổi văn bản mặc định trong dropzone.js?

Tôi đã thử instantiating lớp vùng thả:

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

Với dấu sau:

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

Điều này chắc chắn mang lại cho tôi khả năng để tải lên các tập tin mà văn bản mặc định là trống.

Tôi đã thử nghiệm như sau:

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

và tôi dường như nhận được cùng một kết quả - không có văn bản mặc định. Vậy .. làm cách nào để thay đổi văn bản mặc định?

Nguồn

2013-07-17 Sheldon

107

Thêm một yếu tố trong hình thức vùng thả của bạn như sau:

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

Nguồn

2014-04-10 15:27:30 spedley

Tôi có thể xác nhận rằng tính năng này hoạt động, trong khi thay đổi "dictDefaultMessage" làm cài đặt dường như không làm gì cả. Điều này chủ yếu là do văn bản được thay thế bằng một hình ảnh có văn bản trên đó. –

Tác phẩm này, nhưng làm gì cho tất cả các loại tin nhắn khác? Có một lỗ hổng lớn trong tài liệu hướng dẫn –

đây là công việc, NHƯNG, điều này buộc tôi phải bấm vào chỉ văn bản để hiển thị hộp thoại tải tệp lên. nhấp chuột bên ngoài văn bản hiện đang hiển thị tệp tải lên –

Nếu bạn không phải là bất lợi cho JQuery, điều này sẽ che giấu hình ảnh mặc định:

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

và, điều này sẽ hiển thị khoảng thời gian mặc định mà bạn có thể thay đổi thành bất kỳ thứ gì bạn muốn:

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

Nguồn

2014-05-14 15:25:10 quillbreaker

trong css xem vùng thả cho

.dropzone .dz-default.dz-message

trong lớp này xóa

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

điều tiếp theo phải làm là tìm lớp này

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

và biến nó thành display: block

Nguồn

2014-05-15 19:50:25

Khi tạo vùng thả bạn có thể đặt thông báo mặc định như thế này.

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

Sau đó

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

Nguồn

2015-01-13 15:27:29 Firze

Đầu tiên thêm một id mẫu của bạn, nói mydz, sau đó thêm này JS:

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

Toàn bộ trang (index.php trong trường hợp này):

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

Nguồn

2015-09-11 11:24:43

Đây là tài liệu gì nói, nhưng tiếc là nó không hoạt động đối với tôi –

Bạn đã thêm id vào biểu mẫu chưa? Nếu bạn đã làm, nó không thể không hoạt động. Thêm dropzone.js vào đầu trang của bạn và JS tôi đã cung cấp cho bạn ở cuối trang và nó phải hoạt động. –

Tôi vừa cập nhật bài đăng của mình với toàn bộ trang, sao chép dán, bao gồm các tệp có liên quan và xem liệu nó có hoạt động hay không. –

văn bản này là trong cấu hình mặc định vùng thả của, Bạn có thể ghi đè lên như thế này:

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

Nguồn

2016-03-04 11:11:37 tientoantai

Cảm ơn bạn! Tôi thực sự không cần phải thay đổi thông điệp nhưng đây là điều duy nhất giúp tôi thay đổi defaultOptions ☺ – 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() 
    { 
    ....

Nguồn

2016-05-17 03:33:46

Xin chào! Chào mừng bạn đến với StackOverflow! Khi trả lời các câu hỏi, thay vì chỉ cung cấp mã, vui lòng giải thích nó. Đọc hướng dẫn để trả lời câu hỏi [tại đây] (http://stackoverflow.com/help/how-to-answer) – ayushgp

Bạn có thể thay đổi tất cả thông điệp mặc định với điều này:

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

Nguồn

2016-08-03 00:33:54

Làm cách nào để thay đổi văn bản mặc định trong dropzone.js?

Trả lời

Các vấn đề liên quan