繁体   English   中英

如何在使用 dropzone.js 验证错误后重新启用文件上传的提交按钮?

[英]How to re-enable submit button of file upload after validation error with dropzone.js?

上传文件时,我有一个额外的必填输入字段,名为“title”。 用户将插入一个文件和标题。 如果用户没有输入文件或标题,它会在点击提交后抛出错误。

问题是当我提交一个没有标题的文件时,得到错误,然后返回输入所需的标题字段,我无法再通过单击“提交”再次上传相同的文件。

html

<input type="text" name="title" id="title" placeholder="enter post title" autocomplete="off" />

dropzone.js

// 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);

var myDropzone = new Dropzone(".container", { // Make the whole body a dropzone
  url: "/images-save", // Set the url
  thumbnailWidth: 80,
  thumbnailHeight: 80,
  parallelUploads: 20,
  previewTemplate: previewTemplate,
  maxFilesize: 255,
  maxFiles: 1,
  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.
  acceptedFiles: ".png,.jpg,.gif,.jpeg",
});

myDropzone.on("addedfile", function(file) {
  // Hookup the start button
  file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };

  while (this.files.length > this.options.maxFiles) {
    this.removeFile(this.files[0]);
  }
});

myDropzone.on("sending", function(file, xhr, formData) {
  formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
  formData.append("title", $('#title').val());
});

根据文档,可以使用“错误”回调...

myDropzone.on("error", function (file, error, xhr) {});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM