Dropzone批量上传ASP.NET版，支持MVC+一般处理程序，可提交上传。 ...

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

Dropzone的JS文件需要自己到官网下载下 http://www.dropzonejs.com/,上面也有demo及API，

官网上的 demo是MVC版的并且自动上传的，这里给修改成点击按钮提交上传，也给改成支持一般处理程序了，由于项目需要。。没办法。

各种配置属性这里不一一介绍了，应该都能看懂官网上也有说明，需要改的小伙伴自己查一下吧。不废话了直接上代码及Demo

前端代码

@{
    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代码

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

一般处理程序代码

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