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

问题描述

我目前有一个 HTML 表单，用户可以在其中填写他们希望发布的广告的详细信息.我现在希望能够添加一个 dropzone 来上传待售商品的图片.

我发现 Dropzone.js 似乎可以满足我的大部分需求.但是，在查看文档时，您似乎需要将整个表单的类指定为 dropzone(而不是仅使用 input 元素).这意味着我的整个表单变成了 dropzone.

是否可以仅在我的表单的一部分中使用 dropzone，即仅通过将元素指定为类 "dropzone"，而不是整个表单?

我可以使用单独的表单，但我希望用户能够一键提交所有表单.

或者，有没有其他图书馆可以做到这一点?

非常感谢

解决方案

这是另一种方法:在您的表单中添加一个 div 并使用类名 dropzone，并以编程方式实现 dropzone.

HTML:

<div class="dz-default dz-message"></div>

JQuery:

$(document).ready(function () {Dropzone.autoDiscover = false;$("#dZUpload").dropzone({网址:hn_SimpeFileUploader.ashx"，addRemoveLinks: 真,成功:功能(文件，响应){var imgName = 响应；file.previewElement.classList.add(dz-success");console.log("上传成功:" + imgName);},错误:函数(文件，响应){file.previewElement.classList.add("dz-error");}});});

注意:禁用自动发现，否则 Dropzone 会尝试附加两次

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

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