将Dropzone.js与其他表单字段集成到一个html表单中

本文介绍了将Dropzone.js与其他表单字段集成到一个html表单中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想将dropzonejs添加到其他元素的表单中。我发现这个示例，并遵循指示，不幸的是整个从dropzonejs放置区： github/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone

这是我的代码：

< form action =/ Post / Editclass =dropzoneenctype =multipart / form-data method =post> < div class =form-group> < label for =PostAddress_AddressLineOne>地址第一行< / label> < input class =form-controlid =PostAddress_AddressLineOnename =PostAddress.AddressLineOnetype =textvalue =/> < / div> < div class =dropzone-previews>< / div> < div class =fallback> <！ - 如果JS不工作，这是后备 - > < input name =filetype =filemultiple /> < / div> < script type =text / javascript> Dropzone.options.dropzoneJsForm = { //防止Dropzone立即上传丢失的文件 autoProcessQueue：false， uploadMultiple：true， parallelUploads： 25， maxFiles：25， addRemoveLinks：true， previewsContainer：.dropzone-previews， //设置dropzone init：function（）{ var myDropzone = this; //这是enyo的教程的变化... $（＃submit-all）。click（function（e）{ e。 preventDefault（）; e.stopPropagation（）; myDropzone.processQueue（）; }）; } }; < / script>

我也跟着下面的帖子，整个仍然是一个放置区： 将dropzone.js与其他字段集成到现有的html表单中

我是否必须在表单中填写一个？

谢谢

解决方案

你的表单的类是dropzone，这就是为什么表单变成了一个dropzone。

仅在您想要成为dropzone的实际元素上使用dropzone类。例如，尝试将dropzone-previews更改为dropzone。

或者，如果您想以编程方式创建Dropbox，请使用：

Dropzone.autoDiscover = false;

这将关闭元素的自动转换，使用dropzone类。

I would like to add dropzonejs to a form with other elements. I found this sample and followed the instructions, unfortunately the whole from becomes a dropzonejs drop zone: github/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone

Here is my code:

<form action="/Post/Edit" class="dropzone" enctype="multipart/form-data" method="post"> <div class="form-group"> <label for="PostAddress_AddressLineOne">Address Line One</label> <input class="form-control" id="PostAddress_AddressLineOne" name="PostAddress.AddressLineOne" type="text" value="" /> </div> <div class="dropzone-previews"></div> <div class="fallback"> <!-- this is the fallback if JS isn't working --> <input name="file" type="file" multiple /> </div> <script type="text/javascript"> Dropzone.options.dropzoneJsForm = { //prevents Dropzone from uploading dropped files immediately autoProcessQueue: false, uploadMultiple: true, parallelUploads: 25, maxFiles: 25, addRemoveLinks: true, previewsContainer: ".dropzone-previews", // 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(); }); } }; </script>

I have also followed the follwoing post and the whole from still remains a drop zone: Integrating dropzone.js into existing html form with other fields

Do i have to have a from with in a form?

Thanks

解决方案

The class of your form is "dropzone" and that is why the form becomes a dropzone.

Only use the "dropzone" class on the actual element that you want to become a dropzone. For example try to change "dropzone-previews" into "dropzone".

Or if you want to create the dropbox programmatically, use:

Dropzone.autoDiscover = false;

This will turn off the automatic conversion of elements with the class "dropzone".