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>

并完成Generic Handler“

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

});

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

1 个答案: