Javascript 仅在单击按钮时上载dropzone数据

大家好，我是新来的，我也是jquery的新手 我在我的网站上应用本文一次上传多个数据

当我点击dropzone区域时使用此代码，它会将照片直接上传到

~/work/

因此，我希望使用带有

id=post

要仅在单击dropzone区域后在dropzone区域上载此图像

这是我的代码： 以下是标题：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link href="css/dropzone.css" rel="stylesheet" type="text/css" />
    <script src="js/dropzone.js" type="text/javascript"></script>

html部分：

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

javascript部分：

<script>
    $(document).ready(function () {
        Dropzone.autoDiscover = false;
        //Simple Dropzonejs 
        $("#dZUpload").dropzone({
            url: 'FileUploader.ashx',
            addRemoveLinks: true,
            maxFiles: 3,
            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");
            }
        });

    });

</script>

$（文档）.ready（函数（）{
Dropzone.autoDiscover=false；
//简单Dropzonejs
$（“#dZUpload”）.dropzone({
url:'FileUploader.ashx'，
addRemoveLinks：是的，
maxFiles:3，
成功：函数（文件、响应）{
var imgName=响应；
file.previewElement.classList.add（“dz成功”）；
console.log（“成功上传：+imgName”）；
},
错误：函数（文件、响应）{
file.previewElement.classList.add（“dz错误”）；
}
});
});

最后是通用处理程序“

FileUploader.ashx

:

使用制度；
使用System.Web；
使用System.IO；
公共类文件上载程序：IHttpHandler{
公共void ProcessRequest（HttpContext上下文）
{
context.Response.ContentType=“text/plain”；
字符串dirFullPath=HttpContext.Current.Server.MapPath（“~/work/”）；
字符串[]文件；
整数文件；
files=System.IO.Directory.GetFiles（dirFullPath）；
numFiles=files.Length；
numFiles=numFiles+1；
字符串str_image=“”；
foreach（context.Request.Files中的字符串s）
{
HttpPostedFile file=context.Request.Files[s]；
//int fileSizeInBytes=file.ContentLength；
字符串文件名=file.fileName；
字符串fileExtension=file.ContentType；
如果（！string.IsNullOrEmpty（文件名））
{
fileExtension=Path.GetExtension（文件名）；
str_image=“WorkPhoto”+numFiles.ToString（）+文件扩展名；
字符串pathToSave_100=HttpContext.Current.Server.MapPath（“~/work/”）+str_image；
文件.SaveAs（路径为save_100）；
}
} 
context.Response.Write（str_图像）；
}
公共布尔可重用{
得到{
返回false；
}
}
}

在这里，我认为这将解决您的问题：

<script>
$(document).ready(function () {
    Dropzone.autoDiscover = false;
    //Simple Dropzonejs 
    var myDropzone = new Dropzone("#dZUpload", {
        url: 'FileUploader.ashx', autoProcessQueue: false, addRemoveLinks: true, maxFiles: 3,
        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");
        },
    });
    $('#button').on('click', function (e) {
        myDropzone.processQueue();
    });

});

$（文档）.ready（函数（）{
Dropzone.autoDiscover=false；
//简单Dropzonejs
var myDropzone=新的Dropzone（#dZUpload）{
url:'FileUploader.ashx'，autoProcessQueue:false，addRemoveLinks:true，maxFiles:3，
成功：函数（文件、响应）{
var imgName=响应；
file.previewElement.classList.add（“dz成功”）；
console.log（“成功上传：+imgName”）；
},
错误：函数（文件、响应）{
file.previewElement.classList.add（“dz错误”）；
},
});
$（“#按钮”）。在（'click'，函数（e）{
myDropzone.processQueue（）；
});
});

您可以在myDropzone.processQueue（）之前添加；e.preventDefault（）；以防万一

<script>
$(document).ready(function () {
    Dropzone.autoDiscover = false;
    //Simple Dropzonejs 
    var myDropzone = new Dropzone("#dZUpload", {
        url: 'FileUploader.ashx', autoProcessQueue: false, addRemoveLinks: true, maxFiles: 3,
        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");
        },
    });
    $('#button').on('click', function (e) {
        myDropzone.processQueue();
    });

});