標題取得很弱… 因為這篇的內容要說是補充也不是，說進階也不太算，要說加強的話也沒有強到哪裡去，所以就說是「加點東西」，也真的只是加了一些內容：
- 修正上一版本在 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 上傳檔案時可以顯示上傳進度，也希望能夠與大家分享。
以上
沒有留言:
張貼留言