如何使用dropzone js上传图片预加载onclick

时间:2018-12-30 03:29:51

标签: javascript dropzone.js

如何从dropzone.js上载预加载的图像,我能够列出数据库中的所有图像,但是当我单击以上传时什么也没发生。该脚本没有调用url,似乎没有分配任何事件,我已经对其进行了研究,但是我没有发现任何具体的东西,有人可以帮助我吗?

Dropzone.autoDiscover = false;
        $("#imgProd").dropzone({
            url: '../../../../../controller/update-prod.php',
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads:10,
            acceptedFiles: 'image/*',
            addRemoveLinks: true,
            init: function() {
                let string = '<?php echo $prod->img ?>',
                    arrayImg = string.split(','),

                    mockFile = [];

                    for(let i = 0; i < arrayImg.length; i++){
                        mockFile = {
                            name: arrayImg[i],
                            size:  '1000',
                            accepted: true 
                        };
                        // Call the default addedfile event handler
                        this.emit("addedfile", mockFile);

                        // And optionally show the thumbnail of the file:
                        this.emit("thumbnail", mockFile, '../../../../../images/Products/'+arrayImg[i]);

                        this.files.push(mockFile);
                    }

                dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

                // for Dropzone to process the queue (instead of default form behavior):
                document.getElementById("alter").addEventListener("click", function(e) {
                    // Make sure that the form isn't actually being sent.
                    e.preventDefault();
                    e.stopPropagation();
                    if(!$("#nomeProd").val()){
                        $("#nomeProd").focus();
                        $("#nomeProd").css('border', '1px solid #f44336');
                        $("#nomeProd").css('box-shadow','none');
                        notify('error', 'Informe o Nome do Produto!', 0);
                        return;
                    }else{
                        $("#nomeProd").css('border', '1px solid #ced4da');
                    }

                    if($("#marcaProd").val() == 1){
                        $("#marcaProd").focus();
                        $("#marcaProd").css('border', '1px solid #f44336');
                        $("#marcaProd").css('box-shadow','none');
                        notify('error', 'Informe a Marca Relacionada ao Produto!', 0);
                        return;
                    }else{
                        $("#marcaProd").css('border', '1px solid #ced4da');
                    }

                    if(!$("#descProd").val()){
                        $("#descProd").focus();
                        $("#descProd").css('border', '1px solid #f44336');
                        $("#descProd").css('box-shadow','none');
                        notify('error', 'Informe a Descrição do Produto!', 0);
                        return;
                    }else{
                        $("#descProd").css('border', '1px solid #ced4da');
                    }

                    if(!$("#tagProd").val()){
                        $("#tagProd").focus();
                        $("#tagProd").css('border', '1px solid #f44336');
                        $("#tagProd").css('box-shadow','none');
                        notify('error', 'Informe as Tags Relacionadas ao Produto!', 0);
                        return;
                    }else{
                        $("#tagProd").css('border', '1px solid #ced4da');
                    }

                    dzClosure.processQueue();
                });

                //send all the form data along with the files:
                this.on("sendingmultiple", function(data, xhr, formData) {
                    formData.append("nomeProd", $("#nomeProd").val());
                    formData.append("marcaProd", $("#marcaProd").val());
                    formData.append("descProd", $("#descProd").val());
                    formData.append("tagProd", $("#tagProd").val());
                    formData.append("descProdSeo", $("#descProdSeo").val());
                    formData.append("fileS", $('#fileS')[0].files[0])

                });

                this.on("success", function (file, responseText) {
                    let responsetext = JSON.parse(file.xhr.responseText);

                    if(responsetext.tipo == 'error'){
                        notify(responsetext.tipo, responsetext.msg, 0);
                    }else{
                        notify(responsetext.tipo, responsetext.msg, 1);
                    }
                });
            }
        });

0 个答案:

没有答案