1、上传组件uploadify的申明及剧本援用
Uploadify 是 JQuery 一个有名的上传插件，应用 Flash 手艺，Uploadify 超出浏览器的限定，掌握了全部上传的处置惩罚历程，完成了客户端无革新的文件上传，如许就完成了在客户端的上传进度掌握，所以，你起首要肯定浏览器中已安装了 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开辟框架是基于EasyUI的，平常在网页的最先就会援用相干的类库，已包含了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>
<p>
<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>
<p id="fileQueue" class="fileQueue"></p>
<p id="p_files"></p>
<br />
</p>
</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, //行列最多可上传文件数目，默以为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(), "p_files"); //完成后更新已上传的文件列表
$.messager.alert("提醒", "上传完毕！"); //提醒完成
},
'onUploadStart' : function(file) {
$("#file_upload").uploadify("settings", 'formData', { 'folder': '政策法规', 'guid': $("#Attachment_GUID").val() }); //动态传参数
},
'onUploadError': function (event, queueId, fileObj, errorObj) {
//alert(errorObj.type + "：" + errorObj.info);
}
});
</script>
在上面的剧本中，均有解释，一看就邃晓相干的属性了，不邃晓的也能够到官方网站去查找相识。值得注意的就是
'uploader': '/FileUpload/Upload'
这行就是提交文件给MVC的Action举行处置惩罚，我们在掌握器FileUpload的 Upload处置惩罚即可。
别的，在附件上传完毕后，我们须要对地点的界面举行更新，以便显现已上传的列表，那末我们须要增添下面的函数处置惩罚即可。
'onQueueComplete': function (event, data) {
末了申明异常值得注意的处所，就是文件上传的时刻，我们须要动态猎取界面上的一些元素的值，作为参数通报，那末我们就须要在onUploadStart函数中举行以下处置惩罚。
$("#file_upload").uploadify("settings", 'formData', { 'folder': '政策法规', 'guid': $("#Attachment_GUID").val() }); //动态传参数
3、上传组件uploadify的C#背景处置惩罚代码
在上面的通报参数中，我运用了中文数值，平常情况下，如许会在背景拿到中文乱码，所以我们须要在掌握器的Action的函数内里设置它的内容花样，以下所示。
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开辟框架中的界面展现
细致上传组件在的Web开辟框架中界面结果以下所示，下图是整体的列表中附件的展现。
附件编辑和上传界面以下所示。
附件信息检察结果以下所示：
以上就是基于MVC4+EasyUI开辟附件上传组件uploadify的运用的细致内容，更多请关注ki4网别的相干文章！
