當我還在用Asp.NET開發(fā)一些行業(yè)管理系統(tǒng)的時候，就曾經(jīng)使用這個組件作為文件的上傳操作，在隨筆《Web開發(fā)中的文件上傳組件uploadify的使用》中可以看到，Asp.NET中如何使用這個組件進行文件上傳的，當時上傳文件的處理主要也是使用ashx一般處理程序來進行處理的。本文主要介紹我的Web開發(fā)框架中，在MVC的環(huán)境中如何集成這個非常棒的文件上傳組件的。
1、上傳組件uploadify的說明及腳本引用
Uploadify 是 JQuery 一個著名的上傳插件，利用 Flash 技術(shù)，Uploadify 越過瀏覽器的限制，控制了整個上傳的處理過程，實現(xiàn)了客戶端無刷新的文件上傳，這樣就實現(xiàn)了在客戶端的上傳進度控制，所以，你首先要確定瀏覽器中已經(jīng)安裝了 Adobe 的 Flash 插件。Uploadify 當前有兩個版本，基于 Flash 是免費的，還有基于 HTML5 的收費版，我們使用免費版，當前版本為v3.2.1。
這個組件需要Jquery庫的支持，一般情況下，需要添加Jquery的js庫，如下所示
<script type="text/javascript" src="~/Scripts/jquery-2.0.3.min.js"></script>
不過由于我的Web開發(fā)框架是基于EasyUI的，一般在網(wǎng)頁的開始就會引用相關(guān)的類庫，已經(jīng)包含了Jquery的類庫了，如下所示。
@*添加Jquery，EasyUI和easyUI的語言包的JS文件*@
<script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.min.js"></script>
<script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
<script type="text/javascript" src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>
所以我們只需要添加Javascript類庫（jquery.uploadify.js），另外加上他的樣式文件（uploadify.css）即可：
@*添加對uploadify控件的支持*@
@*<script type="text/javascript" src="~/Scripts/jquery-2.0.3.min.js"></script>*@
<script type="text/javascript" src="~/Content/JQueryTools/uploadify/jquery.uploadify.js"></script>
<link href="~/Content/JQueryTools/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
2、上傳組件uploadify在Web界面的使用
首先我們需要在HTML代碼中放置兩個控件，一個是用來上傳的控件，一個是用來顯示已上傳列表的控件，還有就是添加上傳和取消上傳的按鈕操作，如下所示。
<tr>
<th>
<label for="Attachment_GUID">附件上傳：</label>
</th>
<td>
<div>
<input class="easyui-validatebox" type="hidden" id="Attachment_GUID" name="Attachment_GUID" />
<input id="file_upload" name="file_upload" type="file" multiple="multiple">
<a href="javascript:void(0)" class="easyui-linkbutton" id="btnUpload" data-options="plain:true,iconCls:'icon-save'"
onclick="javascript: $('#file_upload').uploadify('upload', '*')">上傳</a>
<a href="javascript:void(0)" class="easyui-linkbutton" id="btnCancelUpload" data-options="plain:true,iconCls:'icon-cancel'"
onclick="javascript: $('#file_upload').uploadify('cancel', '*')">取消</a>
<div id="fileQueue" class="fileQueue"></div>
<div id="div_files"></div>
<br />
</div>
</td>
</tr>
界面效果初始化如下所示：
當然，下一步我們需要添加相應的文件上傳初始化的操作腳本代碼，如下所示。
<script type="text/javascript">
$(function () {
//添加界面的附件管理
$('#file_upload').uploadify({
'swf': '/Content/JQueryTools/uploadify/uploadify.swf', //FLash文件路徑
'buttonText': '瀏 覽', //按鈕文本
'uploader': '/FileUpload/Upload', //處理文件上傳Action
'queueID': 'fileQueue', //隊列的ID
'queueSizeLimit': 10, //隊列最多可上傳文件數(shù)量，默認為999
'auto': false, //選擇文件后是否自動上傳，默認為true
'multi': true, //是否為多選，默認為true
'removeCompleted': true, //是否完成后移除序列，默認為true
'fileSizeLimit': '10MB', //單個文件大小，0為無限制，可接受KB,MB,GB等單位的字符串值
'fileTypeDesc': 'Image Files', //文件描述
'fileTypeExts': '*.gif; *.jpg; *.png; *.bmp;*.tif;*.doc;*.xls;*.zip', //上傳的文件后綴過濾器
'onQueueComplete': function (event, data) { //所有隊列完成后事件
ShowUpFiles($("#Attachment_GUID").val(), "div_files"); //完成后更新已上傳的文件列表
$.messager.alert("提示", "上傳完畢！"); //提示完成
},
'onUploadStart' : function(file) {
$("#file_upload").uploadify("settings", 'formData', { 'folder': '政策法規(guī)', 'guid': $("#Attachment_GUID").val() }); //動態(tài)傳參數(shù)
},
'onUploadError': function (event, queueId, fileObj, errorObj) {
//alert(errorObj.type + "：" + errorObj.info);
}
});
</script>
在上面的腳本中，均有注釋，一看就明白相關(guān)的屬性了，不明白的也可以到官方網(wǎng)站去查找了解。值得注意的就是
'uploader': '/FileUpload/Upload'
這行就是提交文件給MVC的Action進行處理，我們在控制器FileUpload的 Upload處理即可。
另外，在附件上傳完畢后，我們需要對所在的界面進行更新，以便顯示已上傳的列表，那么我們需要增加下面的函數(shù)處理即可。
'onQueueComplete': function (event, data) {
最后說明非常值得注意的地方，就是文件上傳的時候，我們需要動態(tài)獲取界面上的一些元素的值，作為參數(shù)傳遞，那么我們就需要在onUploadStart函數(shù)中進行如下處理。
$("#file_upload").uploadify("settings",
'formData', {
'folder': '政策法規(guī)',
'guid': $("#Attachment_GUID").val()
}); //動態(tài)傳參數(shù)
3、上傳組件uploadify的C#后臺處理代碼
在上面的傳遞參數(shù)中，我使用了中文數(shù)值，一般情況下，這樣會在后臺拿到中文亂碼，所以我們需要在控制器的Action的函數(shù)里面設(shè)置它的內(nèi)容格式，如下所示。
ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.Charset = "UTF-8";
控制器FileUpload的后臺處理Action代碼完整如下所示：
public class FileUploadController : BaseController
{
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload(HttpPostedFileBase fileData, string guid, string folder)
{
if (fileData != null)
{
try
{
ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.Charset = "UTF-8";
// 文件上傳后的保存路徑
string filePath = Server.MapPath("~/UploadFiles/");
DirectoryUtil.AssertDirExist(filePath);
string fileName = Path.GetFileName(fileData.FileName); //原始文件名稱
string fileExtension = Path.GetExtension(fileName); //文件擴展名
string saveName = Guid.NewGuid().ToString() + fileExtension; //保存文件名稱
FileUploadInfo info = new FileUploadInfo();
info.FileData = ReadFileBytes(fileData);
if (info.FileData != null)
{
info.FileSize = info.FileData.Length;
}
info.Category = folder;
info.FileName = fileName;
info.FileExtend = fileExtension;
info.AttachmentGUID = guid;
info.AddTime = DateTime.Now;
info.Editor = CurrentUser.Name;//登錄人
//info.Owner_ID = OwerId;//所屬主表記錄ID
CommonResult result = BLLFactory<FileUpload>.Instance.Upload(info);
if (!result.Success)
{
LogTextHelper.Error("上傳文件失敗:" + result.ErrorMessage);
}
return Content(result.Success.ToString());
}
catch (Exception ex)
{
LogTextHelper.Error(ex);
return Content("false");
}
}
else
{
return Content("false");
}
}
private byte[] ReadFileBytes(HttpPostedFileBase fileData)
{
byte[] data;
using (Stream inputStream = fileData.InputStream)
{
MemoryStream memoryStream = inputStream as MemoryStream;
if (memoryStream == null)
{
memoryStream = new MemoryStream();
inputStream.CopyTo(memoryStream);
}
data = memoryStream.ToArray();
}
return data;
}
4、上傳組件uploadify在Web開發(fā)框架中的界面展示
具體上傳組件在的Web開發(fā)框架中界面效果如下所示，下圖是總體的列表中附件的展示。
附件編輯和上傳界面如下所示。
附件信息查看效果如下所示：
