Dropzone图片上传选项不起作用:(
[英]Dropzone image upload options not working :(
问题描述
Im trying to build a drag and drop image upload but dropzone options dont work and I dont know if im doing it the right way. 
我试图建立一个拖放图像上传但dropzone选项不工作，我不知道我是否正确的方式。
I would love to set up the following options: 我想设置以下选项：
Upload only one file (multiupload parameter)
仅上传一个文件（multiupload参数） Possibility to remove that file (addremovelink?)
删除该文件的可能性（addremovelink？） Max file size of 2mb (maxfilesize)
最大文件大小为2mb（maxfilesize）
Can you help me please? 你能帮我吗？
here is the code: 这是代码：
<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>
Thank you guys, you rock! 谢谢你们，你摇滚！ :) :)
3 个解决方案
解决方案1
14 已采纳 2013-09-14 07:38:57
Just add before Jquery call 只需在Jquery调用之前添加
Dropzone.autoDiscover = false;
and remove the action from the <form> . 并从<form>删除操作。 That will disable the auto discover function so you can specify all the options for your form. 这将禁用自动发现功能，以便您可以为表单指定所有选项。
This is what your code should look like: 这是你的代码应该是这样的：
<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>
解决方案2
4 2016-12-11 04:52:48
In my situation I had to use the vanilla JS Dropzone Class instantiation and put the Dropzone.autoDiscover = false; 在我的情况下，我不得不使用vanilla JS Dropzone Class实例化并将Dropzone.autoDiscover = false; outside of the $(document).ready function. 在$(document).ready函数之外。
html: HTML：
<form id="image-upload" action="/upload" class="dropzone" method="post" name="file"></form>
javascript: 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.'
});
});
解决方案3
1 2014-01-23 00:01:03
maxFilesize: 2,
uploadMultiple: false,
addRemoveLinks: true,
maxFiles: 1,
autoProcessQueue: false
You will need to add in a button or event handler to allow for processing of the previewed file, if you let it autoProcessQueue you don't have time to decide if you want the file or not unless you add an event handler at the "process" event. 您需要添加一个按钮或事件处理程序以允许处理预览文件，如果您让它autoProcessQueue您没有时间来决定是否需要该文件，除非您在“进程”中添加事件处理程序“事件。
$("#uploadme").dropzone.processQueue()
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.