将单个输入字段添加到使用Dropzone进行多次上传

时间:2018-09-17 14:41:57

标签: javascript jquery dropzone.js dropzone

我正在尝试使用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());
 });

0 个答案:

没有答案