Dropzone批量上傳ASP.NET版，支持MVC+通常處理程序，可提交上傳。

時間 2019-12-08

標籤 dropzone 批量上傳 asp.net asp 支持 mvc 通常處理程序提交欄目 ASP 简体版

原文原文鏈接

Dropzone的JS文件須要本身到官網下載下 http://www.dropzonejs.com/,上面也有demo及API，javascript

官網上的 demo是MVC版的而且自動上傳的，這裏給修改爲點擊按鈕提交上傳，也給改爲支持通常處理程序了，因爲項目須要。。沒辦法。css

各類配置屬性這裏不一一介紹了，應該都能看懂官網上也有說明，須要改的小夥伴本身查一下吧。不廢話了直接上代碼及Demohtml

前端代碼前端

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <link href="/Content/site.css" rel="stylesheet" />

    <link href="/Scripts/dropzone/css/basic.css" rel="stylesheet" />
    <link href="/Scripts/dropzone/css/dropzone.css" rel="stylesheet" />

    <script src="/Scripts/modernizr-2.6.2.js"></script>


    <title>bbb</title>
</head>
<body>
    <div class="jumbotron">
        <form action="~/Home/SaveUploadedFile" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
            <div class="fallback">
                <input name="file" type="file" multiple />

            </div>
            <input type="but" value="Upload1111111111111111111" id="bu" />
        </form>
    </div>

    <style type="text/css">
        .dz-max-files-reached {
            background-color: red;
        }
    </style>
</body>
</html>

<script src="/Scripts/jquery-1.10.2.js"></script>

<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

<script src="~/Scripts/dropzone/dropzone.js"></script>




<script type="text/javascript">

        ////File Upload response from the server
        //Dropzone.options.dropzoneForm = {
        //    maxFiles: 5,//數量
        //    maxFilesize: 10,//大小
        //    autoProcessQueue:true,
        //    init: function () {
        //        //當數量到達最大時候調用
        //        this.on("maxfilesexceeded", function (data) {
      
        //            var res = eval('(' + data.xhr.responseText + ')');

        //        });
        //        //在每一個文件上添加按鈕
        //        this.on("addedfile", function (file) {

        //            // Create the remove button
        //            var removeButton = Dropzone.createElement("<button>Remove file</button>");


        //            // Capture the Dropzone instance as closure.
        //            var _this = this;

        //            // Listen to the click event
        //            removeButton.addEventListener("click", function (e) {
        //                // Make sure the button click doesn't submit the form:
        //                e.preventDefault();
        //                e.stopPropagation();
        //                // Remove the file preview.
        //                _this.removeFile(file);
        //                // If you want to the delete the file on the server as well,
        //                // you can do the AJAX request here.
        //            });

        //            // Add the button to the file preview element.
        //            file.previewElement.appendChild(removeButton);
        //        });
        //    }

     $("#dropzoneForm").dropzone({
         url: "/yns/Up.ashx",
        addRemoveLinks: true,
        dictDefaultMessage: "拖拽文件到此處",
        dictRemoveFile: "x",
        dictCancelUpload: "x",
         parallelUploads:5,
        maxFiles: 10,
        maxFilesize: 5,
        acceptedFiles: ".js,.jpg,.jpge,.doc,.xlsx",
        init: function () {

            this.on("success", function (file) {
                console.log("File " + file.name + "uploaded");
            });
       
            var y = this;
            this.on("removedfile", function (file) {
                console.log("File " + file.name + "Remove");
            });

            $("#bu").click(function () {

                y.processQueue();
            });

        }
    });


     
     


</script>

後臺MVC代碼java

        public ActionResult SaveUploadedFile()
        {
            bool isSavedSuccessfully = true;
            string fName = "";
            foreach (string fileName in Request.Files)
            {
                HttpPostedFileBase file = Request.Files[fileName];
                //Save file content goes here
                
                fName = file.FileName;
                if (file != null && file.ContentLength > 0)
                {

                    var originalDirectory = new DirectoryInfo(string.Format("{0}Content", Server.MapPath(@"\")));

                    string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "imagepath");

                    var fileName1 = Path.GetFileName(file.FileName);


                    bool isExists = System.IO.Directory.Exists(pathString);

                    if (!isExists)
                        System.IO.Directory.CreateDirectory(pathString);

                    var path = string.Format("{0}\\{1}", pathString, file.FileName);
                    file.SaveAs(path);

                }

            }

            if (isSavedSuccessfully)
            {
                return Json(new { Message = fName });
            }
            else
            {
                return Json(new { Message = "Error in saving file" });
            }
        }


        public ActionResult bbb()
        {
            return View();
        }

通常處理程序代碼jquery

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;

namespace WebApplication1.yns
{
    /// <summary>
    /// Up 的摘要說明
    /// </summary>
    public class Up : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {

            string fName = "";
            foreach (string fileName in context.Request.Files)
            {
      
                HttpPostedFile file = context.Request.Files[fileName];
     
                fName = file.FileName;
                if (file != null && file.ContentLength > 0)
                {
                    //路徑
                    var originalDirectory = new DirectoryInfo(string.Format("{0}Content", System.Web.HttpContext.Current.Server.MapPath(@"\")));
                    //合併地址
                    string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "UploadFiles");

                    var fileName1 = Path.GetFileName(file.FileName);//文件名與擴展名

                    int bytes = file.ContentLength;//獲取文件的字節大小  

                    if (bytes > 1024 * 1024)
                        ResponseWriteEnd(context, "3"); //圖片不能大於1M  

                    //判斷地址是否存在，不存在則建立
                    bool isExists = System.IO.Directory.Exists(pathString);

                    if (!isExists)
                        System.IO.Directory.CreateDirectory(pathString);

                    var path = string.Format("{0}\\{1}", pathString, file.FileName);
                    //保存
                    file.SaveAs(path);

                }else
                {
                    ResponseWriteEnd(context, "4");//請選擇要上傳的文件  
                }
            }


            ResponseWriteEnd(context, "1"); //上傳成功  
        }
    private void ResponseWriteEnd(HttpContext context, string msg)
    {
        context.Response.Write(msg);
        context.Response.End();
    }

    public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}