ASP.NET MVC中使用Dropzone.js實現圖片的批量拖拽上傳

時間 2019-11-29

標籤 asp.net asp mvc 使用 dropzone.js dropzone 實現圖片批量上傳欄目 ASP 简体版

原文原文鏈接

說在前面css

　　最近在作一個MVC相冊的網站（這裏），須要批量上傳照片功能，因此就在網上搜相關的插件，偶然機會發現Dropzone.js，試用了一下徹底符合個人要求，並且樣式挺滿意的，因而就在個人項目中使用了這個插件。在使用的過程當中發現中文的相關文檔較少，說多了都是淚，硬着頭皮看官方的網站，原本英文不咋地，只能邊查單詞邊用了，因而就有了這篇文章，主要是總結在使用Dropzone中的遇到的一些問題及詳細的使用步驟。html

Dropzone.js是啥？前端

　　Dropzone.js是一個開源庫，提供拖放文件上傳及圖像預覽。它是輕量級的，不依賴於任何其餘庫（如jQuery），而且是高度可定製的，官網在這裏。首先說在前面的是由於這是一個基於Html APIs的插件，因此有下列瀏覽器支持：html5

Chrome 7+
Firefox 4+
IE 10+
Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)
Safari 6+

　　注意：若是您的客戶還在使用IE10如下的瀏覽器，那可能這篇文章不太適合您，或者您能夠說服客戶放棄使用IE，可能得到不同的體驗。jquery

效果圖git

　　直接上幾張效果圖，你們先看看是否符合您的要求，再決定是否使用。github

如何下載？web

　　官網提供的js下載，在這裏，這僅僅是一個js，不包括相關的樣式、圖片等，因此建議從Github上下載完整的包，地址在這裏。下載這個項目最簡單的方法是使用右側的Download ZIP，會自動將全部文件打包成zip格式的文件下載下來，裏面的downloads文件夾就是咱們須要的，包括須要用到的js、圖片、css等文件。bootstrap

如何使用？後端

　　dropzone官網提供了Demo，可是Demo中沒有實現一次上傳多張圖片的功能，並且也沒有提供服務器端C#的相關代碼。因此我就把使用的步驟總結了一下，方便之後的複用。在這裏我把使用方法分爲前端和後端的代碼，前端主要是文件的引用、dropzone初始化、以及相關的屬性事件說明。後端就是指MVC中Action了，主要功能是從Request獲取文件，存放到服務器中。下面讓我細細道來。

★前端

　 一、引用文件

　　首先呢，確定是先把下載的文件分類放到本身的項目中，這樣便於之後的管理，也符合國際慣例。

　　而後就須要在頁面中引用，引用的代碼以下：

//樣式文件
<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>

　　你們看到我引用了三個文件，其中jQuery的文件不是必需的，由於在文章開頭也介紹過dropzone是獨立的庫，不須要依賴jQuery，我爲了操做方便，因此在這裏引用了一下，看我的選擇了。

　　二、創建表單元素　　

<!--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>

　　三、初始化Dropzone，並添加屬性和事件

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

　　這樣前端的工做基本完成了，下面來看看後端的工做。

★後端

　　後端的功能挺簡單，就是接收文件，而後將數據保存到服務器上，並返回JSON數據。代碼以下：

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