dropzone.js选项可能未放置在正确的位置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了dropzone.js选项可能未放置在正确的位置相关的知识，希望对你有一定的参考价值。
我正在使用Dropzone.js，但我的选项根本无法识别。我尝试将代码放置在不同的位置，但是我不确定应该将其放置在何处。我阅读到Dropzone.options必须不在document.ready范围内，否则将无法正常工作。
<form action="/" method="post" class="dropzone" id="my-dropzone"></form>
<script>
var myDropzone = new Dropzone("#my-dropzone");
// Disabling autoDiscover, otherwise Dropzone will try to attach twice.
Dropzone.autoDiscover = false;
Dropzone.options.myDropzone =
paramName: 'photo',
acceptedFiles: '.jpg, .jpeg, .png',
maxFilesize: 1,
init: function()
this.on("uploadprogress", function(file, progress)
console.log("File progress", progress);
);
答案
$(function()
Dropzone.options.myDropzone =
maxFilesize: 1,
addRemoveLinks: true,
dictResponseError: 'Server not Configured',
acceptedFiles: ".png,.jpg,.jpeg",
init: function()
var self = this;
// config
self.options.addRemoveLinks = true;
self.options.dictRemoveFile = "Delete";
//New file added
self.on("addedfile", function(file)
console.log('new file added ', file);
);
// Send file starts
self.on("sending", function(file)
console.log('upload started', file);
$('.meter').show();
);
// File upload Progress
self.on("totaluploadprogress", function(progress)
console.log("progress ", progress);
$('.roller').width(progress + '%');
);
self.on("queuecomplete", function(progress)
$('.meter').delay(999).slideUp(999);
);
// On removing file
self.on("removedfile", function(file)
console.log(file);
);
;
).dropzone,
.dropzone *,
.dropzone-previews,
.dropzone-previews *
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.dropzone
position: relative;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(0, 0, 0, 0.02);
padding: 1em;
.dropzone.dz-clickable
cursor: pointer;
.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message span
cursor: pointer;
.dropzone.dz-clickable *
cursor: default;
.dropzone .dz-message
opacity: 1;
-ms-filter: none;
filter: none;
.dropzone.dz-drag-hover
border-color: rgba(0, 0, 0, 0.15);
background: rgba(0, 0, 0, 0.04);
.dropzone.dz-started .dz-message
display: none;
.dropzone .dz-preview,
.dropzone-previews .dz-preview
background: rgba(255, 255, 255, 0.8);
position: relative;
display: inline-block;
margin: 17px;
vertical-align: top;
border: 1px solid #acacac;
padding: 6px 6px 6px 6px;
.dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],
.dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail]
display: none;
.dropzone .dz-preview .dz-details,
.dropzone-previews .dz-preview .dz-details
width: 100px;
height: 100px;
position: relative;
background: #ebebeb;
padding: 5px;
margin-bottom: 22px;
.dropzone .dz-preview .dz-details .dz-filename,
.dropzone-previews .dz-preview .dz-details .dz-filename
overflow: hidden;
height: 100%;
.dropzone .dz-preview .dz-details img,
.dropzone-previews .dz-preview .dz-details img
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
.dropzone .dz-preview .dz-details .dz-size,
.dropzone-previews .dz-preview .dz-details .dz-size
position: absolute;
bottom: -28px;
left: 3px;
height: 28px;
line-height: 28px;
.dropzone .dz-preview.dz-error .dz-error-mark,
.dropzone-previews .dz-preview.dz-error .dz-error-mark
display: block;
.dropzone .dz-preview.dz-success .dz-success-mark,
.dropzone-previews .dz-preview.dz-success .dz-success-mark
display: block;
.dropzone .dz-preview:hover .dz-details img,
.dropzone-previews .dz-preview:hover .dz-details img
display: none;
.dropzone .dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark
display: none;
position: absolute;
width: 40px;
height: 40px;
font-size: 30px;
text-align: center;
right: -10px;
top: -10px;
.dropzone .dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark
color: #8cc657;
.dropzone .dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark
color: #ee162d;
.dropzone .dz-preview .dz-progress,
.dropzone-previews .dz-preview .dz-progress
position: absolute;
top: 100px;
left: 6px;
right: 6px;
height: 6px;
background: #d7d7d7;
display: none;
.dropzone .dz-preview .dz-progress .dz-upload,
.dropzone-previews .dz-preview .dz-progress .dz-upload
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0%;
background-color: #8cc657;
.dropzone .dz-preview.dz-processing .dz-progress,
.dropzone-previews .dz-preview.dz-processing .dz-progress
display: block;
.dropzone .dz-preview .dz-error-message,
.dropzone-previews .dz-preview .dz-error-message
display: none;
position: absolute;
top: -5px;
left: -20px;
background: rgba(245, 245, 245, 0.8);
padding: 8px 10px;
color: #800;
min-width: 140px;
max-width: 500px;
z-index: 500;
.dropzone .dz-preview:hover.dz-error .dz-error-message,
.dropzone-previews .dz-preview:hover.dz-error .dz-error-message
display: block;
.dropzone
border: 1px solid rgba(0, 0, 0, 0.03);
min-height: 360px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.03);
padding: 23px;
.dropzone .dz-default.dz-message
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
background-image: url("../images/spritemap.png");
background-repeat: no-repeat;
background-position: 0 0;
position: absolute;
width: 428px;
height: 123px;
margin-left: -214px;
margin-top: -61.5px;
top: 50%;
left: 50%;
@media all and (-webkit-min-device-pixel-ratio:1.5),
(min--moz-device-pixel-ratio:1.5),
(-o-min-device-pixel-ratio:1.5/1),
(min-device-pixel-ratio:1.5),
(min-resolution:138dpi),
(min-resolution:1.5dppx)
.dropzone .dz-default.dz-message
background-image: url("../images/spritemap@2x.png");
-webkit-background-size: 428px 406px;
-moz-background-size: 428px 406px;
background-size: 428px 406px;
.dropzone .dz-default.dz-message span
display: none;
.dropzone.dz-square .dz-default.dz-message
background-position: 0 -123px;
width: 268px;
margin-left: -134px;
height: 174px;
margin-top: -87px;
.dropzone.dz-drag-hover .dz-message
opacity: 0.15;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
filter: alpha(opacity=15);
.dropzone.dz-started .dz-message
display: block;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
.dropzone .dz-preview,
.dropzone-previews .dz-preview
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
font-size: 14px;
.dropzone .dz-preview.dz-image-preview:hover .dz-details img,
.dropzone-previews .dz-preview.dz-image-preview:hover .dz-details img
display: block;
opacity: 0.1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
.dropzone .dz-preview.dz-success .dz-success-mark,
.dropzone-previews .dz-preview.dz-success .dz-success-mark
opacity: 1;
-ms-filter: none;
filter: none;
.dropzone .dz-preview.dz-error .dz-error-mark,
.dropzone-previews .dz-preview.dz-error .dz-error-mark
opacity: 1;
-ms-filter: none;
filter: none;
.dropzone .dz-preview.dz-error .dz-progress .dz-upload,
.dropzone-previews .dz-preview.dz-error .dz-progress .dz-upload
background: #ee1e2d;
.dropzone .dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark,
.dropzone .dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark
display: block;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-ms-transition: opacity 0.4s ease-in-out;
transition:以上是关于dropzone.js选项可能未放置在正确的位置的主要内容，如果未能解决你的问题，请参考以下文章