最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用

来源:动视网 责编:小采 时间:2020-11-27 22:35:23
文档

基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用

基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用:1、上传组件uploadify的说明及脚本引用 Uploadify 是 JQuery 一个著名的上传插件,利用 Flash 技术,Uploadify 越过浏览器的限制,控制了整个上传的处理过程,实现了客户端无刷新的文件上传,这样就实现了在客户端的上传进度控制,所以,你首先要确定浏览器中
推荐度:
导读基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用:1、上传组件uploadify的说明及脚本引用 Uploadify 是 JQuery 一个著名的上传插件,利用 Flash 技术,Uploadify 越过浏览器的限制,控制了整个上传的处理过程,实现了客户端无刷新的文件上传,这样就实现了在客户端的上传进度控制,所以,你首先要确定浏览器中


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> 
 <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, //队列最多可上传文件数量,默认为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': '政策法规', '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的Web开发框架之附件上传组件uploadify的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

文档

基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用

基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用:1、上传组件uploadify的说明及脚本引用 Uploadify 是 JQuery 一个著名的上传插件,利用 Flash 技术,Uploadify 越过浏览器的限制,控制了整个上传的处理过程,实现了客户端无刷新的文件上传,这样就实现了在客户端的上传进度控制,所以,你首先要确定浏览器中
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top