没有形式的Dropzone和其他数据

时间:2017-07-31 19:56:45

标签: javascript php jquery dropzone.js

我的dropzone配置没有表单标记,但是我想为每个图像添加其他数据。

以下代码是我的JS:

Dropzone.autoDiscover = false;

var previewNode = $("#template");
previewNode.id = "";

var previewTemplate = previewNode.parent().html();

$("#template").remove();

var myDropzone = new Dropzone(document.body, {// Make the whole body a dropzone
    url: SITE_URL + "produto/upload-img", // Set the url
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    paramName: "image",
    addRemoveLinks: true,
    maxFilesize: 1.2,
    maxFiles: 4,
    dictCancelUploadConfirmation: "Você tem a certeza que pretende remover esta imagem?",
    previewTemplate: previewTemplate,
    removedfile: function (file) {
        var name = file.name;
        $.ajax({
            type: 'POST',
            url: SITE_URL + 'produto/delete-img',
            data: 'nome=' + name,
            dataType: 'html',
            success: function (data) {
                console.log(data);
            },
            error: function (data, error) {
                console.log(data);
                console.log(data.responseText);
            }
        });
        var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
    },
    success: function (file, response, action) {

        // PHP server response
        if ($.trim(response) == 'success') {
            this.defaultOptions.success(file);
        } else {
            this.defaultOptions.error(file, response);
        }
    },
    init: function () {
    },
    autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
});

myDropzone.on("addedfile", function (file) {
    // console.log(file);
    // clicar no start e fazer upload
    file.previewElement.querySelector(".start").onclick = function () {
        myDropzone.enqueueFile(file);
    };

});

myDropzone.on("totaluploadprogress", function (progress) {
    $("#total-progress .progress-bar").css("width", progress + "%");
});

myDropzone.on("sending", function (file) {
    // console.log(file);
    // Show the total progress bar when upload starts
    $("#total-progress").css('opacity', 0);
    // And disable the start button
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});

myDropzone.on("queuecomplete", function (progress) {
    $("#total-progress").css('opacity', 1);
});

document.querySelector("#actions .cancel-all").onclick = function () {
    console.log()
    myDropzone.removeAllFiles(true);
};

document.querySelector("#actions .start").onclick = function () {
    myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};

$(".img-uploaded .dz-remove").click(function (e) {

    console.log("clicou");
    e.preventDefault();

    var nome = $(this).parent().find(".name").text();

    $.ajax({
        type: 'POST',
        url: SITE_URL + 'produto/delete-img',
        data: 'nome=' + nome + '&action=inicial',
        dataType: 'html',
        success: function (data) {
            console.log(data);
        },
        error: function (data, error) {
            console.log(data);
            console.log(data.responseText);
        }
    });

});

HTML:

<div id="template" class="file-row">
    <div>
        <span class="preview"><img data-dz-thumbnail /></span>
    </div>
    <div>
        <p class="name" data-dz-name></p>
        <strong class="error text-danger" data-dz-errormessage></strong>
    </div>
    <div>
        <p class="size" data-dz-size></p>
        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
        </div>
    </div>

    <div>
        <button class="btn btn-primary start">
            <i class="glyphicon glyphicon-upload"></i>
            <span>Upload</span>
        </button>
        <button data-dz-remove class="btn btn-warning cancel">
            <i class="glyphicon glyphicon-ban-circle"></i>
            <span>Cancelar</span>
        </button>
        <button data-dz-remove class="btn btn-danger delete">
            <i class="glyphicon glyphicon-trash"></i>
            <span>Apagar</span>
        </button>
    </div>
</div>

我应该在哪里添加其他字段?

0 个答案:

没有答案