将dropzone.js与其他字段集成到现有的HTML表单中

我目前有一个HTML表单，用户可以填写他们希望发布的广告的详细信息。 我现在想要能够添加一个dropzone上传图片的项目出售。 我发现dropzone.js似乎做我需要的大部分。 但是，在查看文档时，似乎需要将整个表单的类指定为“dropzone”（而不仅仅是input元素）。 这意味着我的整个表单变成了dropzone。 是否有可能在我的表单的一部分使用dropzone，即只通过指定元素作为类dropzone，而不是整个forms？

我可以使用单独的表单，但我希望用户能够使用一个button来提交。

或者，有另一个图书馆可以做到这一点？

非常感谢

Answer 1

下面是另一种方法：在窗体中添加一个带有classname的dropzone的div ，并以编程方式实现dropzone。

HTML：

 <div id="dZUpload" class="dropzone"> <div class="dz-default dz-message"></div> </div> 

JQuery的：

 $(document).ready(function () { Dropzone.autoDiscover = false; $("#dZUpload").dropzone({ url: "hn_SimpeFileUploader.ashx", addRemoveLinks: true, success: function (file, response) { var imgName = response; file.previewElement.classList.add("dz-success"); console.log("Successfully uploaded :" + imgName); }, error: function (file, response) { file.previewElement.classList.add("dz-error"); } }); }); 

注意：禁用autoDiscover，否则Dropzone将尝试附加两次

博客文章 ： Dropzone js + Asp.net：简单的方法来上传批量图像

Answer 2

我有完全相同的问题，发现Varan Sinayee的答案是唯一真正解决了原始问题的答案。 答案可以简化，所以这里是一个更简单的版本。

步骤是：

1. 创build一个正常的forms（不要忘了方法和enctype参数，因为这不是由dropzone处理了）。

2. 把class="dropzone"放在里面，用class="dropzone" （这是Dropzone的附加方式）和id="yourDropzoneName" （用于更改选项）。

3. 设置Dropzone的选项，设置表单和文件将被发布的URL，停用autoProcessQueue（所以它只发生在用户按下“提交”），并允许多个上传（如果你需要的话）。

4. 设置init函数使用Dropzone，而不是默认行为，当点击提交button时。

5. 仍然在init函数中，使用“sendingmultiple”事件处理程序将表单数据与文件一起发送。

Voilà！ 你现在可以像使用普通表格那样检索数据，在$ _POST和$ _FILES（在这个例子中，这将发生在upload.php中）

HTML

 <form action="upload.php" enctype="multipart/form-data" method="POST"> <input type="text" id ="firstname" name ="firstname" /> <input type="text" id ="lastname" name ="lastname" /> <div class="dropzone" id="myDropzone"></div> <button type="submit" id="submit-all"> upload </button> </form> 

JS

 Dropzone.options.myDropzone= { url: 'upload.php', autoProcessQueue: false, uploadMultiple: true, parallelUploads: 5, maxFiles: 5, maxFilesize: 1, acceptedFiles: 'image/*', addRemoveLinks: true, init: function() { dzClosure = this; // Makes sure that 'this' is understood inside the functions below. // for Dropzone to process the queue (instead of default form behavior): document.getElementById("submit-all").addEventListener("click", function(e) { // Make sure that the form isn't actually being sent. e.preventDefault(); e.stopPropagation(); dzClosure.processQueue(); }); //send all the form data along with the files: this.on("sendingmultiple", function(data, xhr, formData) { formData.append("firstname", jQuery("#firstname").val()); formData.append("lastname", jQuery("#lastname").val()); }); } } 

Answer 3

Enyo的教程非常好。

我发现本教程中的示例脚本适用于embedded在dropzone中的button（即表单元素）。 如果你希望在表单元素之外有button，我可以使用一个点击事件来完成它：

首先，HTML：

 <form id="my-awesome-dropzone" action="/upload" class="dropzone"> <div class="dropzone-previews"></div> <div class="fallback"> <!-- this is the fallback if JS isn't working --> <input name="file" type="file" multiple /> </div> </form> <button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button> 

然后，脚本标签….

 Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element // The configuration we've talked about above autoProcessQueue: false, uploadMultiple: true, parallelUploads: 25, maxFiles: 25, // The setting up of the dropzone init: function() { var myDropzone = this; // Here's the change from enyo's tutorial... $("#submit-all").click(function (e) { e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); } } 

Answer 4

“dropzone.js”是上传图片最常用的库。 如果您希望将“dropzone.js”作为表单的一部分，则应执行以下步骤：

1）为客户端：

HTML：

  <form action="/" enctype="multipart/form-data" method="POST"> <input type="text" id ="Username" name ="Username" /> <div class="dropzone" id="my-dropzone" name="mainFileUploader"> <div class="fallback"> <input name="file" type="file" multiple /> </div> </div> </form> <div> <button type="submit" id="submit-all"> upload </button> </div> 

JQuery的：

  <script> Dropzone.options.myDropzone = { url: "/Account/Create", autoProcessQueue: false, uploadMultiple: true, parallelUploads: 100, maxFiles: 100, acceptedFiles: "image/*", init: function () { var submitButton = document.querySelector("#submit-all"); var wrapperThis = this; submitButton.addEventListener("click", function () { wrapperThis.processQueue(); }); this.on("addedfile", function (file) { // Create the remove button var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>"); // Listen to the click event removeButton.addEventListener("click", function (e) { // Make sure the button click doesn't submit the form: e.preventDefault(); e.stopPropagation(); // Remove the file preview. wrapperThis.removeFile(file); // If you want to the delete the file on the server as well, // you can do the AJAX request here. }); // Add the button to the file preview element. file.previewElement.appendChild(removeButton); }); this.on('sendingmultiple', function (data, xhr, formData) { formData.append("Username", $("#Username").val()); }); } }; </script> 

2）服务器端：

ASP.Net MVC

  [HttpPost] public ActionResult Create() { var postedUsername = Request.Form["Username"].ToString(); foreach (var imageFile in Request.Files) { } return Json(new { status = true, Message = "Account created." }); } 

Answer 5

您可以通过捕获您的dropzone中的“发送”事件来修改formData。

 dropZone.on('sending', function(data, xhr, formData){ formData.append('fieldname', 'value'); }); 

Answer 6

除了sqram的说法外，Dropzone还有一个额外的未公开的选项“hiddenInputContainer”。 你所要做的就是把这个选项设置为你希望隐藏的文件字段被附加到的表单的select器。 瞧！ Dropzone通常添加到主体的“.dz-hidden-input”文件字段神奇地移动到您的表单中。 没有改变Dropzone源代码。

现在，虽然这工作将Dropzone文件字段移动到您的窗体，该字段没有名称。 所以你需要添加：

 _this.hiddenFileInput.setAttribute("name", "field_name[]"); 

在这行之后dropzone.js：

 _this.hiddenFileInput = document.createElement("input"); 

在547线附近。

Answer 7

为了在单个请求中将所有文件与其他表单数据一起提交，您可以将Dropzone.js临时隐藏的input节点复制到表单中。 您可以在addedfiles事件处理程序中执行此addedfiles ：

 var myDropzone = new Dropzone("myDivSelector", { url: "#", autoProcessQueue: false }); myDropzone.on("addedfiles", () => { // Input node with selected files. It will be removed from document shortly in order to // give user ability to choose another set of files. var usedInput = myDropzone.hiddenFileInput; // Append it to form after stack become empty, because if you append it earlier // it will be removed from its parent node by Dropzone.js. setTimeout(() => { // myForm - is form node that you want to submit. myForm.appendChild(usedInput); // Set some unique name in order to submit data. usedInput.name = "foo"; }, 0); }); 

显然，这是一个依赖于实现细节的解决方法。 相关的源代码 。

Answer 8

这是您如何在现有表单中使用Dropzone.js的另一个示例。

dropzone.js：

  init: function() { this.on("success", function(file, responseText) { //alert("HELLO ?" + responseText); mylittlefix(responseText); }); return noop; }, 

然后，在后面的文件我放

 function mylittlefix(responseText) { $('#botofform').append('<input type="hidden" name="files[]" value="'+ responseText +'">'); } 

这假设你有一个ID为#botofform的div，上传的时候可以使用上传的文件名。

注意：我的上传脚本返回了uploadedfilename.jpeg dubblenote，您还需要创build一个清理脚本，用于检查上传目录中未使用的文件，并删除它们，如果前端未经过身份validation，则为:)