仅当我单击按钮时才上传 dropzone 数据

Question

大家好，我是新来的，我也是 jquery 的新手 我将这篇文章应用于我的网站以一次上传多个数据 using-dropzone-js-file-image-upload-in-asp-net-webform-c

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

所以我希望使用带有id=post 的按钮 只有点击后才能将这些图像上传到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>

最后是通用处理程序“

文件上传器.ashx

：

<%@ WebHandler Language="C#" Class="FileUploader" %>

using System;
using System.Web;
using System.IO;
public class FileUploader : IHttpHandler {
    
   public void ProcessRequest(HttpContext context)
  {
            context.Response.ContentType = "text/plain";
 
            string dirFullPath = HttpContext.Current.Server.MapPath("~/work/");
            string[] files;
            int numFiles;
            files = System.IO.Directory.GetFiles(dirFullPath);
            numFiles = files.Length;
            numFiles = numFiles + 1;
 
            string str_image = "";
 
            foreach (string s in context.Request.Files)
            {
                HttpPostedFile file = context.Request.Files[s];
              //  int fileSizeInBytes = file.ContentLength;
                string fileName = file.FileName;
                string fileExtension = file.ContentType;
 
                if (!string.IsNullOrEmpty(fileName))
                {
                    fileExtension = Path.GetExtension(fileName);
                    str_image = "WorkPhoto_" + numFiles.ToString() + fileExtension;
                    string pathToSave_100 = HttpContext.Current.Server.MapPath("~/work/") + str_image;
                    file.SaveAs(pathToSave_100);
                }
            } 
            context.Response.Write(str_image);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

Answer 1

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

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

});