我正在尝试使用dropzone实现多文件上传,并希望向每个上传的Image添加一个输入字段,以便能够添加图像标题。我发现以下添加动态输入字段。所有这些都有效,我选择了一个图像,并且该图像与2个字段一起添加到了预览中,但是当我保存表单时,这2个字段的值为空。我做错了什么,该怎么办?任何提示高度赞赏。先感谢您。
// Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
autoProcessQueue: false,
uploadMultiple: true,
autoDiscover: false,
maxFiles: 20,
paramName: 'image',
thumbnailWidth: 288,
thumbnailHeight:192,
thumbnailMethod: 'contain',
parallelUploads: 20,
previewTemplate: previewTemplate,
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.
url: '/memberarea/admin/gallery/save-album',
// The setting up of the dropzone
init: function() {
var myAwesomeDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector(".save-album").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
myAwesomeDropzone.processQueue();
})
// 'scope' is all files
this.on("addedfile", function (file) {
var unique_field_id = new Date().getTime();
title = file.title == undefined ? "" : file.title;
file._titleLabel = Dropzone.createElement("<p>Title:</p>")
file._titleBox = Dropzone.createElement("<input id='"+file.name+unique_field_id+"_title' type='text' name='title' value="+title+" >");
file.previewElement.appendChild(file._titleLabel);
file.previewElement.appendChild(file._titleBox);
description = file.description == undefined ? "" : file.description;
file._descriptionLabel = Dropzone.createElement("<p>Description:</p>")
file._descriptionBox = Dropzone.createElement("<input id='"+file.name+unique_field_id+"_desc' type='text' name='description' value="+description+" >");
file.previewElement.appendChild(file._descriptionLabel);
file.previewElement.appendChild(file._descriptionBox);
});
this.on("sendingmultiple", function (file, xhr, formData) {
title = file.previewElement.querySelector("input[name='title'");
description = file.previewElement.querySelector("input[name='description'");
// format of this depends on your paramName config. Mine was called image
formData.append("image[title]", $(title).val());
formData.append("image[description]", $(description).val());
});