Question

我正在尝试构建一个拖放图片上传，但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>

谢谢你们，你摇滚！：）

Answer 1

只需在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>

Answer 2

在我的情况下，我不得不使用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.'
    });
});

Answer 3

maxFilesize: 2,
uploadMultiple: false,
addRemoveLinks: true,
maxFiles: 1,
autoProcessQueue: false

您需要添加一个按钮或事件处理程序以允许处理预览文件，如果您让autoProcessQueue没有时间来决定是否需要该文件，除非您添加一个事件＆＃34;过程中的处理程序＆＃34;事件。

$("#uploadme").dropzone.processQueue()

Dropzone图片上传选项不起作用:(

3 个答案: