ASP.NET MVC - 使用 jQuery Form Plugin 做檔案上傳之加點東西

標題取得很弱… 因為這篇的內容要說是補充也不是，說進階也不太算，要說加強的話也沒有強到哪裡去，所以就說是「加點東西」，也真的只是加了一些內容：

• 修正上一版本在 IE 瀏覽器所出現的 JSON 問題
• 上傳前的檢查
• 上傳時的效果

 

---

修正上一版本在 IE 瀏覽器所出現的 JSON 問題

上篇文章發佈之後才想到也需要在 IE 瀏覽器做檢查，看看會不會出現異常，果不其然，還真的有出現問題，檔案上傳完畢之後就出現在 IE 瀏覽器出現的老問題，

所以就在 Controller Action 方法傳回 JSON 結果再加點東西，如下：

就是加上 「text/html」ContentType，加上這個 ContentType 之後，在 IE 瀏覽器就不會出現詢問要開啟或儲存的訊息了。

 

上傳前的檢查

上一篇也是沒有做上傳前的檢查，一般來說前端在按下 Submit 前都應該要先做個檢查，同樣的在 jQuery Form Plugin 也有提供這樣的一個 option「beforeSubmit」，

所以我就把 Javascript 程式修改如下，增加了對 file 欄位是否有選擇檔案的檢查：

<script type="text/javascript">

    $(function () {

        $("#UploadForm").ajaxForm({

            iframe: true,

            dataType: "json",

            beforeSubmit: function () {

                var fileContent = $.trim($('#file').val());

                if (fileContent.length == 0) {

                    toastr.warning('請選擇要上傳的檔案.', 'Wraning Message');

                    return false;

                }

                return true;

            },

            success: function (result) {

                $('#UploadForm').resetForm();

                if (result.success) {

                    toastr.success(result.message, 'Success Message');

                }

                else {

                    toastr.error(result.message, 'Error Message');

                }

            },

            error: function (xhr, textStatus, errorThrown) {

                $('#UploadForm').resetForm();

                toastr.error('檔案上傳錯誤.', 'Error Message');

            }

        });

    });

</script>

如果沒有選擇要上傳的檔案就 Submit 出去就會顯示警告訊息。

 

上傳時的效果

因為在 jQuery Form Plug 的 File Upload 項目有三個 Demo，

http://jquery.malsup.com/form/#file-upload

這三個 Demo 都是跟上傳顯示 Progress （進度條）有關，

然而 jQuery Form Plugin 的範例是用 PHP，但是在 ASP.NET MVC 就無法使用，上傳檔案顯示上傳進度的效果是很多人會想要的，但是遍尋各種 Javascript 的上傳檔案套件都沒有讓我覺得比較合適的，因為我比較不想要使用 Flash 或是 Html 5 有關的套件，而在試過很多方式之後就決定不做這個效果了，如果有需要的話就改用 HTML 5 的方式來解決，最後我就退而求其次改採用 jQuery UI 的 Dialog，並且在 Dialog 中顯示 ajax-loader.gif 圖檔，雖無法提供上傳進度的數字訊息，也還可以顯示個類似進度條的動態圖檔，使用 Dialog 並關閉其 close 功能直到上傳完成才觸發關閉 Dialog，這個用意是為了防止使用者重複 Submit。

修改的 View 如下：

@{

    ViewBag.Title = "FileUpload";

}

<h2>FileUpload</h2>

<hr />

<form id="UploadForm" action="@Url.Action("FileUpload")" method="post" enctype="multipart/form-data">

    <label for="file">Filename:</label>

    <input type="file" name="file" id="file" />

    <input type="submit" />

</form>

<div id="ProgressDialog" style="text-align: center; padding: 50px;">

    <img src="@Url.Content("~/Images/ajax-loader.gif")" width="128" height="15" alt="Loading" />

</div>

javascript 程式內容：

<script type="text/javascript">

    $(function () {

        $("#ProgressDialog").dialog({

            autoOpen: false,

            draggable: false,

            modal: true,

            resizable: false,

            title: "Loading",

            closeOnEscape: false,

            open: function () { 

                $(".ui-dialog-titlebar-close").hide(); 

            }

        });

        $("#UploadForm").ajaxForm({

            iframe: true,

            dataType: "json",

            beforeSubmit: function () {

                var fileContent = $.trim($('#file').val());

                if (fileContent.length == 0) {

                    toastr.warning('請選擇要上傳的檔案.', 'Wraning Message');

                    return false;

                }

                return true;

            },

            beforeSend: function () {

                $("#ProgressDialog").dialog("open");

            },

            success: function (result) {

                $('#UploadForm').resetForm();

                if (result.success) {

                    $("#ProgressDialog").dialog("close");

                    toastr.success(result.message, 'Success Message');

                }

                else {

                    $("#ProgressDialog").dialog("close");

                    toastr.error(result.message, 'Error Message');

                }

            },

            error: function (xhr, textStatus, errorThrown) {

                $('#UploadForm').resetForm();

                $("#ProgressDialog").dialog("close");

                toastr.error('檔案上傳錯誤.', 'Error Message');

            }

        });

    });

</script>

執行結果：

上傳中會顯示 Dialog（dialog 的 title 好像不太對，應該是 uploading 才對，懶得改了）

上傳完成後會關閉 Dialog 並顯示成功訊息

 

---

就這樣！另外如果有朋友知道如何不用 Flash, HTML 5 的方式讓 ASP.NET MVC 使用 jQuery Form Plugin 上傳檔案時可以顯示上傳進度，也希望能夠與大家分享。

 

以上