반응형
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();
동일한 결과를 얻는 것 같습니다. 기본 텍스트가 없습니다. 그래서 .. 기본 텍스트는 어떻게 변경합니까?
다음과 같이 dropzone 양식에 요소를 추가하십시오.
<div class="dz-message" data-dz-message><span>Your Custom Message</span></div>
다음 과 같이 모든 기본 메시지 를 변경할 수 있습니다 .
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.";
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'});
먼저 양식에 ID를 추가 한 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>
이 텍스트는 dropzone의 기본 구성에 있으며 다음과 같이 덮어 쓸 수 있습니다.
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()
{
....
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.');
dropzone의 CSS에서
.dropzone .dz-default.dz-message
이 수업에서 삭제
background-image: url("../images/spritemap.png");
다음으로 할 일은이 클래스를 검색하는 것입니다
.dropzone .dz-default.dz-message span {
display: none;
}
display : block으로 변경합니다.
Asp.Net Razor Pages에서 Dropzone을 지역화하기 위해 디코딩 된 문자를 피하기 위해 아래 방법을 사용합니다.
모든 메시지에 대한 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을 사용한 전체 드래그 드롭 파일 업로드 샘플은이 GitHub 저장소를 참조하십시오. https://github.com/LazZiya/FileUpload
프로그래밍 방식으로 Dropzone을 생성하는 경우 다음과 같이 옵션을 설정해야합니다.
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",
});
이렇게 사용하면 작동하지 않습니다 ...
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",
};
참조 URL : https://stackoverflow.com/questions/17702394/how-do-i-change-the-default-text-in-dropzone-js
반응형
'IT TIP' 카테고리의 다른 글
| Flutter에서 열에 ListView를 추가하는 방법은 무엇입니까? (0) | 2020.12.31 |
|---|---|
| 단일 개발자를위한 소스 제어 시스템 (0) | 2020.12.31 |
| 신속하게 이번 달의 첫 번째와 마지막 날 (0) | 2020.12.31 |
| Ruby on Rails의 '뒤로'브라우저 작업 (0) | 2020.12.31 |
| 스토리 보드와 기존 XIB 방식 (0) | 2020.12.31 |