Dropzone图像上传选项不起作用:(答案

【问题标题】：Dropzone image upload options not working :(Dropzone图像上传选项不起作用:(
【发布时间】：2013-08-04 14:58:01
【问题描述】：

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

谢谢你们，你们太棒了！ :)

【问题讨论】：

嗨。你遇到了什么问题？

标签： php javascript jquery dropzone.js

【解决方案1】：

在我的情况下，我不得不使用香草 JS Dropzone 类实例化并将 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.'
    });
});

【讨论】：

【解决方案2】：

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

【讨论】：

autoDiscover 语句应该在 DOM 就绪事件之外。除此之外，此代码不会使拖放对我有用。 dropzone 也拒绝生成任何缩略图。
这里也一样。选项没有效果，有一个添加文件的按钮，而不是拖放。

【解决方案3】：

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

您将需要添加一个按钮或事件处理程序以允许处理预览文件，如果您让它 autoProcessQueue 您没有时间决定是否需要该文件，除非您添加一个事件处理程序“过程”事件。

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

【讨论】：