将Dropzone.js与其他表单字段集成到一个html表单中 [英] Integrating Dropzone.js into a html form with other form fields

问题描述

我想将dropzonejs添加到其他元素的表单中。我发现这个示例，并遵循指示，不幸的是整个从dropzonejs放置区： https://github.com/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: https://github.com/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".

这篇关于将Dropzone.js与其他表单字段集成到一个html表单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！