2013年3月26日 星期二

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

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

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

 


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

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

image

image

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

image

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

image

 

上傳前的檢查

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

image

所以我就把 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 出去就會顯示警告訊息。

image

 

上傳時的效果

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

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

image

這三個 Demo 都是跟上傳顯示 Progress (進度條)有關,

image

image

image

然而 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 才對,懶得改了)

image

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

image

 


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

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。