基于MVC4+EasyUI的Web開發(fā)框架之附件上傳組件uploadify的使用
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="external nofollow" 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)" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" id="btnUpload" data-options="plain:true,iconCls:'icon-save'"
onclick="javascript: $('#file_upload').uploadify('upload', '*')">上傳</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" 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ù)里面設置它的內(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ā)框架中界面效果如下所示，下圖是總體的列表中附件的展示。
附件編輯和上傳界面如下所示。
附件信息查看效果如下所示：
總結(jié)
以上所述是小編給大家介紹的基于MVC4+EasyUI的Web開發(fā)框架之附件上傳組件uploadify的使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章介紹了為Visual Studio2019添加Git組件的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
ASP.NET下上傳圖片到數(shù)據(jù)庫，并且讀出圖片的代碼(詳細版)
上傳圖片到數(shù)據(jù)庫，從數(shù)據(jù)庫的創(chuàng)建到數(shù)據(jù)庫中圖片的現(xiàn)實都給出了具體的代碼，因為asp.net版本的問題，大家可能需要稍微修改下。2010-07-07
asp.net中實現(xiàn)簡單驗證碼的方法，需要的朋友可以參考下2012-05-05
這篇文章主要介紹了log4net配置和使用方法，大家參考使用吧2014-01-01
C#開發(fā)微信 二維碼鼠標滑動 圖像顯示隱藏效果(推薦)
客戶端微信在二維碼狀態(tài)下，鼠標滑過，會有一張手機的圖片滑動滑出，從隱藏到顯示，從顯示到隱藏。效果非常棒，本文思路介紹明確，感興趣的朋友一起看看吧2016-11-11
Asp.Net實現(xiàn)無限分類生成表格的方法(后臺自定義輸出table)
這篇文章主要介紹了Asp.Net實現(xiàn)無限分類生成表格的方法,同時后臺自定義輸出table表格,詳細分析了asp.net生成表格的相關(guān)技巧,需要的朋友可以參考下2016-04-04
詳解在DevExpress程序中使用TreeList控件以及節(jié)點查詢的處理
本篇文章主要介紹基于DevExpress的TreeList控件使用以及使用SearchControl對節(jié)點進行查詢的操作，具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
Asp.net core利用dynamic簡化數(shù)據(jù)庫訪問
這篇文章介紹了Asp.net core利用dynamic簡化數(shù)據(jù)庫訪問的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
Asp.net中斷點續(xù)傳的原理與實現(xiàn)方法分享
在了解HTTP斷點續(xù)傳的原理之前，讓我們先來了解一下HTTP協(xié)議，HTTP協(xié)議是一種基于tcp的簡單協(xié)議，分為請求和回復兩種2012-08-08
水印的實現(xiàn)方法有很多，而且各種各樣，在本文將為大家介紹下在asp.net中時如何實現(xiàn)的，如果你不會可以參考下2013-09-09