我的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>
我应该在哪里添加其他字段?