it-swarm.dev

كيف يمكنني تغيير النص الافتراضي في dropzone.js؟

أنا أستخدم dropzone.js لتحميل الملفات. ومع ذلك ، أواجه صعوبة في تغيير النص الافتراضي.

لقد جربت إنشاء فئة dropzone:

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

ويبدو أنني حصلت على نفس النتيجة - لا يوجد نص افتراضي. لذلك .. كيف يمكنني تغيير النص الافتراضي؟

53
Sheldon

أضف عنصرًا في نموذج dropzone الخاص بك كما يلي:

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

يمكنك تغيير جميع الرسائل الافتراضية مع هذا:

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.";
43
Sergio Cabral

عند إنشاء dropzone ، يمكنك تعيين الرسالة الافتراضية مثل هذا.

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

ثم

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

أولاً أضف معرفًا إلى النموذج الخاص بك ، قل mydz ، ثم أضف js:

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

الصفحة بأكملها (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>
7
Ollicca Mindstorm

هذا النص في التكوين الافتراضي dropzone ، يمكنك الكتابة مثل هذا:

Dropzone.prototype.defaultOptions.dictDefaultMessage = "Your text";
7
tientoantai
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()
    {
     ....
4
Eduardo Paz

إذا لم تكن معاكسًا لـ JQuery ، فسيؤدي ذلك إلى إخفاء الصورة الافتراضية:

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

وسيُظهر هذا النطاق الافتراضي الذي يمكنك تغييره ليكون ما تريد:

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

في المغلق من dropzone ننظر ل

.dropzone .dz-default.dz-message

في هذه الفئة حذف

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

الشيء التالي الذي يجب القيام به هو البحث في هذه الفئة

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

وتغييره لعرضه: كتلة

1
Snick MB

لتوطين Dropzone في صفحات Asp.Net Razor ، استخدم الطريقة أدناه لتجنب الأحرف غير المشفرة:

إنشاء عنصر HTML لجميع الرسائل

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

ثم قم بربط الرسائل بعنصر Dropzone:

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

للحصول على عينة كاملة لتحميل الملفات بالسحب باستخدام Dropzone ، انظر مستودع جيثب: https://github.com/LazZiya/FileUpload

1
Laz Ziya