[英]Dropzone image upload options not working :(
我试图建立一个拖放图像上传但dropzone选项不工作,我不知道我是否正确的方式。
我想设置以下选项:
仅上传一个文件(multiupload参数)
删除该文件的可能性(addremovelink?)
最大文件大小为2mb(maxfilesize)
你能帮我吗?
这是代码:
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="dropzone.js" type="text/javascript"></script>
<link href="css/basic.css" rel="stylesheet" type="text/css" />
<link href="css/dropzone.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#uploadme").dropzone({
paramName: 'photos',
url: 'upload.php',
dictDefaultMessage: "Drag your images",
clickable: true,
enqueueForUpload: true,
maxFilesize: 1,
uploadMultiple: false,
addRemoveLinks: true
});
});
</script>
<form action="upload.php" class="dropzone">
<div id="uploadme" class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
</body>
</html>
谢谢你们,你摇滚! :)
只需在Jquery调用之前添加
Dropzone.autoDiscover = false;
并从<form>
删除操作。 这将禁用自动发现功能,以便您可以为表单指定所有选项。
这是你的代码应该是这样的:
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="dropzone.js" type="text/javascript"></script>
<link href="css/basic.css" rel="stylesheet" type="text/css" />
<link href="css/dropzone.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
Dropzone.autoDiscover = false;
$("#uploadme").dropzone({
paramName: 'photos',
url: 'upload.php',
dictDefaultMessage: "Drag your images",
clickable: true,
enqueueForUpload: true,
maxFilesize: 1,
uploadMultiple: false,
addRemoveLinks: true
});
});
</script>
<form action="" class="dropzone">
<div id="uploadme" class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
</body>
</html>
在我的情况下,我不得不使用vanilla JS Dropzone Class实例化并将Dropzone.autoDiscover = false;
在$(document).ready
函数之外。
HTML:
<form id="image-upload" action="/upload" class="dropzone" method="post" name="file"></form>
JavaScript的:
<script>
Dropzone.autoDiscover = false;
$(document).ready(function() {
var myDropzone = new Dropzone('form#image-upload',{
maxFiles:12,
acceptedFiles: 'image/*',
dictInvalidFileType: 'This form only accepts images.'
});
});
maxFilesize: 2,
uploadMultiple: false,
addRemoveLinks: true,
maxFiles: 1,
autoProcessQueue: false
您需要添加一个按钮或事件处理程序以允许处理预览文件,如果您让它autoProcessQueue您没有时间来决定是否需要该文件,除非您在“进程”中添加事件处理程序“事件。
$("#uploadme").dropzone.processQueue()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.