如何更改 drozone.js 中的默认文本？

我使用 降落区 Js上传文件。然而，我有困难改变默认文本。

我试过实例化降落区类:

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

我似乎得到了相同的结果-没有默认文本。那么. . 我如何改变默认文本？

117883 次浏览
小开
最佳答案

Add an element within your dropzone form as follows:

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

If you aren't adverse to JQuery, this will hide the default image:

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

and, this will show the default span which you can change to be whatever you want:

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

in the css of dropzone look for 

.dropzone .dz-default.dz-message

in this class delete 

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

the next thing to do is search this class

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

and change it to display:block

小开

When creating the dropzone you can set the default message like this.

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

Then

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

First add an id to your form, say mydz, then add this js:

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

The whole page (index.php in this case):

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

this text is in dropzone's default config, You can overwrite like this:

Dropzone.prototype.defaultOptions.dictDefaultMessage = "Your text";
小开 
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()
{
....
小开

You can change all default messages with this:

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

For localizing Dropzone in Asp.Net Razor Pages I use the below method to avoid decoded chars :

Create HTML element for all messages

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

Then bind messages to 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>

for a complete drag-drop file upload sample using Dropzone see this GitHub repository : https://github.com/LazZiya/FileUpload

小开

If you are creating Dropzones Programmatically then you have to set your options like below:

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


});

If you are using it like this, It wont work ...

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",
};
小开

I fiddled with this for hours.

For some reason, these 3 things needed to be done:

  1. My dropzone tags could not be on the same page I was using dropzone on. I had to reference them on the template page
  2. The element you are turning into a dropzone has to have a class of 'dropzone'
  3. You have to add the following to the top of the js file for the page i was working on.

Dropzone.autoDiscover = false;

To Initialize:

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

Once I had all 3 in order, the dictDefaultMessage option worked.


提交答案