这是另一种方法：添加 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