Dropzone image upload options not working :(

前端 未结 3 2087
执念已碎
执念已碎 2020-12-15 13:21

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 opt

相关标签:
3条回答
  • 2020-12-15 13:39
    maxFilesize: 2,
    uploadMultiple: false,
    addRemoveLinks: true,
    maxFiles: 1,
    autoProcessQueue: false
    

    You will need to add in a button or event handler to allow for processing of the previewed file, if you let it autoProcessQueue you don't have time to decide if you want the file or not unless you add an event handler at the "process" event.

    $("#uploadme").dropzone.processQueue()
    
    0 讨论(0)
  • 2020-12-15 13:59

    In my situation I had to use the vanilla JS Dropzone Class instantiation and put the Dropzone.autoDiscover = false; outside of the $(document).ready function.

    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.'
        });
    });
    

    0 讨论(0)
  • 2020-12-15 14:00

    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>
    
    0 讨论(0)
提交回复
热议问题