Dropzone - динамически добавлять вызов ajax не работает - PullRequest
Новая
       10

Dropzone - динамически добавлять вызов ajax не работает

0 голосов
/ 19 сентября 2019

Я пытаюсь добавить dropzone html div после вызова ajax.первый раз работает нормально, но второй раз не работает.Можете ли вы помочь мне, где я иду не так?

Вы можете проверить ссылку ниже рабочего и не рабочего раздела.

1-я ссылка на изображение работает, а 2-я ссылка не работает.

https://drive.google.com/file/d/0B3TJpFGO8ExcMEM5YlMwU2FiYzJMempKRDFELTdRNmJXUlRF/view?usp=sharing

https://drive.google.com/file/d/0B3TJpFGO8Exca0EwRTRqR2k4WDZiejVuZEZrRFBJOEk0Vmdz/view

index.php 

<link rel="stylesheet" href="css/dropzone.css">
<script type='text/javascript' src='js/jquery-2.2.3.min.js'></script>
<script src="js/dropzone.js"></script>

<div class="row">
    <div class="form-group col-md-12 right">                            
        <button type="button" class="btn btn-danger right" id="delete"></button>
        <button type="button" class="btn btn-info right" id="add"></button>
    </div>
</div>

<div class="row" id="addDrpzone"></div>

<script type="text/javascript">
$(document).ready(function($) {
    $('#add').click(function() {
        $.ajax({
            url: "dropzone.php",
            success: function(response){
                if( response == '' ) {
                    $('#addDrpzone').html('');
                } else {
                    $('#addDrpzone').append(response);
                }
            }
        });
    });
});

Dropzone.options.myDropzone = {
    paramName: "file",
    maxFilesize: 2,
    maxFiles: 3,
    dictRemoveFile: "Remove",
    acceptedFiles: "image/*",
    url: "http://example.com/upload.php",
    dictDefaultMessage: "Drag & drop images here to upload",
    init: function() {
        $(this.element).addClass("dropzone");
        var myDropzone = this;
        var req = this.element.className.split(" ")[1];

        this.on("drop", function(event) {
            var imageUrl = event.dataTransfer.getData('URL');
            var fileName = imageUrl.split('/').pop();

            event.dataTransfer.effectAllowed = 'copy';

            function getDataUri(url, callback) {
                var image = new Image();
                image.onload = function() {
                    var canvas = document.createElement('canvas');
                    canvas.width = this.naturalWidth;
                    canvas.height = this.naturalHeight;

                    canvas.getContext('2d').drawImage(this, 0, 0);
                    callback(canvas.toDataURL('image/jpeg'));
                };

                image.setAttribute('crossOrigin', 'anonymous');
                image.src = url;
            }

            function dataURItoBlob(dataURI) {
                var byteString,
                mimestring

                if (dataURI.split(',')[0].indexOf('base64') !== -1) {
                    byteString = atob(dataURI.split(',')[1])
                } else {
                    byteString = decodeURI(dataURI.split(',')[1])
                }

                mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]

                var content = new Array();
                for (var i = 0; i < byteString.length; i++) {
                    content[i] = byteString.charCodeAt(i)
                }

                return new Blob([new Uint8Array(content)], {
                    type: mimestring
                });
            }

            getDataUri(imageUrl, function(dataUri) {
                var blob = dataURItoBlob(dataUri);
                blob.name = fileName;
                myDropzone.addFile(blob);
            });
        });
    }
}
</script>

dropzone.php 

<div class="col-md-11 width_height">
    <div>
        <div class="form-group col-md-6">
            <div id="myDropzone" class="dropzone" >
                <div class="dropzone-previews"></div>
                <div class="fallback">
                    <input name="image" type="file" />
                </div>
            </div>
        </div>
    </div>
</div>
...