将dropzone.js与其他字段集成到现有的HTML表单中 [英] Integrating dropzone.js into existing html form with other fields

问题描述

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

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

另外，是否有另一个库可以做到这一点？

非常感谢

解决方案

这是另一种方法：添加 div 在您的窗体中使用类名dropzone，并以编程方式实现dropzone

$ b

HTML：

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

JQuery：

（$ {$ b $（＃dZUpload）。）（$文档）.ready（函数（）{
Dropzone.autoDiscover = false;
$ $ b url：hn_SimpeFileUploader.ashx，
addRemoveLinks：true，
success：function（file，response）{
var imgName = response; $ b $ file.previewElement.classList。添加（dz-success）;
console.log（成功上传：+ imgName）;
}，
错误：function（file，response）{
file .previewElement.classList.add（dz-error）;
}
}）;
}）;

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

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

I currently have a html form which users fill in details of an advert they wish to post. I now want to be able to add a dropzone for uploading images of the item for sale. I have found dropzone.js which seems to do most of what I need. However, when looking into the documentation, it appears that you need to specify the class of the whole form as 'dropzone' (as opposed to just the input element). This then means that my entire form becomes the dropzone. Is it possible to use the dropzone in just part of my form i.e. by only specifying the element as class dropzone, rather than the whole form?

I could use separate forms, but I want the user to be able to submit it all with one button.

Alternatively, is there another library that can do this?

Many thanks

解决方案

Here's another way to do it: add a div in your form with a classname dropzone, and implement dropzone programmatically.

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");
        }
    });
});

Note : Disabling autoDiscover, otherwise Dropzone will try to attach twice

Blog Article : Dropzone js + Asp.net: Easy way to upload Bulk images

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