Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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.

I would love to set up the following options:

  • Upload only one file (multiupload parameter)

  • Possibility to remove that file (addremovelink?)

  • Max file size of 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! :)

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
744 views
Welcome To Ask or Share your Answers For Others

1 Answer

Just add before Jquery call

Dropzone.autoDiscover = false;

and remove the action from the <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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...