ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

//样式文件
<link href="~/Content/css/dropzone.css" rel="stylesheet" />

//jQuery文件，不是必需的
<script src="~/Scripts/jquery-1.8.2.min.js"></script>

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

<!--class="dropzone" 使用dropzone自带的样式 样式在引用的CSS中-->
<form action="/"
    class="dropzone"
    enctype="multipart/form-data"
    id="my-dropzone"
    method="post">
    <!--上传图片时，需要同时提交的数据，这里做个演示-->
    @Html.Hidden("hidAlbumId")
</form>
<div>
    <!--上传按钮，提供多张图片一次性上传的功能-->
    <button type="submit" id="submit-all" disabled="disabled">上传</button>
</div>

<script>
        //Dropzone的初始化，myDropzone为form的id
        Dropzone.options.myDropzone = {

            //指定上传图片的路径
            url: "@Url.Action("BatchUpload", "PhotoUpload")",

            //添加上传取消和删除预览图片的链接，默认不添加
            addRemoveLinks: true,

            //关闭自动上传功能，默认会true会自动上传
            //也就是添加一张图片向服务器发送一次请求
            autoProcessQueue: false,

            //允许上传多个照片
            uploadMultiple: true,

            //每次上传的最多文件数，经测试默认为2，坑啊
            //记得修改web.config 限制上传文件大小的节
            parallelUploads: 100,

            init: function () {
                var submitButton = document.querySelector("#submit-all")
                myDropzone = this; // closure

                //为上传按钮添加点击事件
                submitButton.addEventListener("click", function () {
                    //手动上传所有图片
                    myDropzone.processQueue();
                });

                //当添加图片后的事件，上传按钮恢复可用
                this.on("addedfile", function () {
                    $("#submit-all").removeAttr("disabled");
                });

                //当上传完成后的事件，接受的数据为JSON格式
                this.on("complete", function (data) {
                    if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                        var res = eval(‘(‘ + data.xhr.responseText + ‘)‘);
                        var msg;
                        if (res.Result) {
                            msg = "恭喜，已成功上传" + res.Count + "张照片！";
                        }
                        else {
                            msg = "上传失败，失败的原因是：" + res.Message;
                        }
                        $("#message").text(msg);
                        $("#dialog").dialog("open");
                    }
                });

                //删除图片的事件，当上传的图片为空时，使上传按钮不可用状态
                this.on("removedfile", function () {
                    if (this.getAcceptedFiles().length === 0) {
                        $("#submit-all").attr("disabled", true);
                    }
                });
            }
        };
</script>

[HttpPost]
public ActionResult BatchUpload()
{
    bool isSavedSuccessfully = true;
    int count = 0;
    string msg = "";

    string fileName = "";
    string fileExtension = "";
    string filePath = "";
    string fileNewName = "";

    //这里是获取隐藏域中的数据
    //int albumId = string.IsNullOrEmpty(Request.Params["hidAlbumId"]) ?
    //    0 : int.Parse(Request.Params["hidAlbumId"]);

    try
    {
        string directoryPath = Server.MapPath("~/Content/photos");
        if (!Directory.Exists(directoryPath))
            Directory.CreateDirectory(directoryPath);

        foreach (string f in Request.Files)
        {
            HttpPostedFileBase file = Request.Files[f];

            if (file != null && file.ContentLength > 0)
            {
                fileName = file.FileName;
                fileExtension = Path.GetExtension(fileName);
                fileNewName = Guid.NewGuid().ToString() + fileExtension;
                filePath = Path.Combine(directoryPath, fileNewName);
                file.SaveAs(filePath);

                count++;
            }
        }
    }
    catch (Exception ex)
    {
        msg = ex.Message;
        isSavedSuccessfully = false;
    }

    return Json(new
    {
        Result = isSavedSuccessfully,
        Count = count,
        Message = msg
    });
}