7

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

谢谢你们，你们摇滚！:)

4

3 回答 3

14

只需在 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>
于 2013-09-14T07:38:57.867 回答
6

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

于 2016-12-11T04:52:48.980 回答
0 
maxFilesize: 2,
uploadMultiple: false,
addRemoveLinks: true,
maxFiles: 1,
autoProcessQueue: false

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

$("#uploadme").dropzone.processQueue()
于 2014-01-23T00:01:03.423 回答