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

rde*_*ira 7 javascript php jquery dropzone.js

我试图建立一个拖放图像上传但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>
Run Code Online (Sandbox Code Playgroud)

谢谢你们,你摇滚!:)

小智 14

只需在Jquery调用之前添加

Dropzone.autoDiscover = false;
Run Code Online (Sandbox Code Playgroud)

并从中删除操作<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>
Run Code Online (Sandbox Code Playgroud)


小智 6

在我的情况下,我不得不使用 vanilla JS Dropzone 类实例化并将函数置于Dropzone.autoDiscover = false;外部$(document).ready

html:

<form id="image-upload" action="/upload" class="dropzone" method="post" name="file"></form>
Run Code Online (Sandbox Code Playgroud)

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.'
    });
});
Run Code Online (Sandbox Code Playgroud)