1、上传组件上传的说明及脚本引用

上传是JQuery一个著名的上传插件，利用闪光技术，上传越过浏览器的限制，控制了整个上传的处理过程，实现了客户端无刷新的文件上传，这样就实现了在客户端的上传进度控制，所以，你首先要确定浏览器中已经安装了砖坯黏土的闪光插件。

上传当前有两个版本，基于闪光是免费的，还有基于HTML5的收费版，我们使用免费版，当前版本为v3.2.1。

这个组件需要Jquery库的支持，一般情况下，需要添加Jquery的射流研究…库，如下所示

脚本类型=' text/JavaScript ' src=' http : ~/Scripts/jquery-2。0 .3 .量滴js '/脚本不过由于我的网开发框架是基于易居的，一般在网页的开始就会引用相关的类库，已经包含了Jquery的类库了，如下所示。

@*添加Jquery，EasyUI和易居的语言包的射流研究…文件*@脚本类型=' text/JavaScript ' src=' http : ~/Content/jqueryasyui/jquery。量滴js /脚本脚本类型=' text/JavaScript ' src=' http : ~/Content/jqueryasyui/jquery。易居。量滴js /脚本类型=' text/JavaScript ' src=' http : ~/Content/jqueryasyui/locale/easyui-lang-zh所以我们只需要添加爪哇岛描述语言类库(jquery.uploadify.js)，另外加上他的样式文件(uploadify.css)即可：

@*添加对上传控件的支持* @ *脚本类型=' text/JavaScript ' src=' http : ~/Scripts/jquery-2。0 .3 .量滴js '/脚本* @脚本类型=' text/JavaScript ' src=' http : ~/Content/jquerytols/uploadify/jquery。上传。js /脚本链接href=' ~/Content/jquerytols/uploadify/uploadify。CSS ' rel=' externafollow ' rel上传组件上传在网界面的使用

首先我们需要在超文本标记语言代码中放置两个控件，一个是用来上传的控件，一个是用来显示已上传列表的控件，还有就是添加上传和取消上传的按钮操作，如下所示。

='附件_GUID '的第一个标签附件上传：/label/th TD div input class=' easy ui-validate box ' type=' hidden ' id=' Attachment _ GUID ' name=' Attachment _ GUID '/input id=' file _ upload ' type=' file ' multiple=' multiple ' a href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' class=' easy ui-link button ' id=' btnUpload ' data-options=' 纯： true，uploadify('上传'，' * ')上传/a a href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' class=' measuri-link button ' id=' btncanceluload ' data-options=' plain : true，iconcl s 3360 ' icon-cancel ' ' onclick=' JavaScript : $(' # file _ upload '). uploadify('cancel '，' * ')取消/a div id='文件队列' class='文件队列'/div div id=' div _ files '/div br//div/TD/tr界面效果初始化如下所示：

当然，下一步我们需要添加相应的文件上传初始化的操作脚本代码，如下所示。

脚本类型=' text/JavaScript ' $(function(){//添加接口$ ('# file _ upload ')的附件管理。uploadify({ ' swf ' : '/content/jquerytools/uploadify/uploadify . swf '，//FLash文件路径' buttonText':' browse '，//button text ' uploader ' 3360 '/文件上载/上载'，//处理文件上载操作' queueID': 'fileQueue '，//队列的ID为' Queue Size Limit' : 10。//默认情况下，队列可以上传的最大文件数为999' auto' 3360 false。//选择后是否自动上传文件，默认为真' multi' 3360 true。//是否选择多个文件，默认值为真‘删除完成’:为真。//完成后是否删除序列，默认值为真‘文件大小限制’3360‘10mb’。//单个文件大小，0不限，可以接受KB、MB、GB等字符串值。文件类型Desc' : '图像文件'。//文件描述*。jpg*.巴布亚新几内亚；*.bmp*.tif*.doc*.xls*.zip '，//上传的文件后缀筛选器' onqueuecomplete' :函数(事件，数据){//队列完成后的所有事件都显示upfiles ($ ('# attachment _ guid ')。val()，' div _ files ')；//更新上传的文件列表$.messager.alert('提示'，'上传完成！' );//提示完成}，' onuploadstart' :函数(文件){$ ('# file _ upload ')。uploadify ('settings '，' formdata '，{ ' folder ' 3360 ' policy and regulations '，' guid ' : $(' # attachment)//动态参数传输}，' onuploaderror ' :函数(event，queueid，fileobj，error obj){//alert(error obj . type):' error obj . info)；} });/script在上面的脚本中，有注释，可以一目了然的了解相关属性，如果不了解可以在官网上查找。值得注意的是

行‘Uploader’:/FileUpload/upload’是将文件提交给MVC的Action进行处理，我们可以在控制器file upload中进行上传处理。

另外，附件上传后，我们需要更新界面显示上传的列表，所以需要增加以下功能处理。

Onqueuecomplete' :函数(事件，数据){最后一个注意事项是，上传文件时，我们需要动态获取接口上一些元素的值，并作为参数传递，因此需要在onUploadStart函数中做以下处理。

$ ('# file _ upload ')。uploadify ('settings '，' formdata '，{ ' folder ' : ' policy and regulations '，' guid' : $ ('# attachment _ guid ')。val()})；//动态参数传输3。上传组件uploadify的C#后台处理代码

在上面的传输参数中，我使用了中文数值。一般中文乱码字符是在后台获取的，所以我们需要在控制器的Action功能中设置其内容格式，如下图所示。

ControllerContext。请求内容编码=编码。GetEncoding(' UTF-8 ')；ControllerContext。响应。内容编码=编码。GetEncoding(' UTF-8 ')；ControllerContext。响应.字符集=' UTF-8 '；控制器文件上传后台处理的动作代码完成如下：

公共类文件上传控制器：基本控制器{[接受verboss(Httpverbs .post)]公共行动结果上传(https tedfile基础文件数据，字符串guid，字符串文件夹){ if (fileData！=null){ 0尝试{ ControllerContext .请求内容编码=编码GetEncoding(' UTF-8 ')；控制器上下文.响应。内容编码=编码GetEncoding(' UTF-8 ')；控制器上下文.响应。字符集=' UTF-8 '；//文件上传后的保存路径字符串文件路径=服务器. MapPath(' ~/UploadFiles/')；导演直到.AssertDirExist(文件路径);字符串文件名=路径。获取文件名（文件数据. FIlename)；//原始文件名称字符串文件扩展名=路径. GetExtension(FIlename)；//文件扩展名字符串saveName=Guid .NewGuid().ToString()文件扩展名；//保存文件名称file uploadinfo=new file uploadinfo()；信息。文件数据=读取文件字节（文件数据);如果(信息。文件数据！=null) {信息.文件大小=信息。文件数据。长度；}信息。类别=文件夹；信息文件名=文件名信息文件扩展=文件扩展信息附件GUID=guid信息添加时间=日期时间.现在；信息。编辑器=当前用户.名称；//登录人//信息Owner _ ID=OwerId//所属主表记录标识公共结果结果=BLLFactoryFileUpload .实例。上传（信息);if(！结果。成功){ LogTextHelper .错误('上传文件失败： '结果错误消息)；}返回内容（结果。成功。ToString())；} catch(Exception ex){ LogTextHelper .错误（例如);返回内容("假");} } else {返回内容(' false ')；} } private byte[]ReadFileBytes(https tedfilebase文件数据){ byte[]数据；使用（流输入流=文件数据InputStream){内存流内存流=InputStream作为内存流；if(内存流==null){内存流=新内存流()；输入流.复制到(内存流)；}数据=内存流.ToArray()；}返回数据；}4、上传组件上传在网开发框架中的界面展示

具体上传组件在的网开发框架中界面效果如下所示，下图是总体的列表中附件的展示。

附件编辑和上传界面如下所示。

附件信息查看效果如下所示：

总结

以上所述是小编给大家介绍的基于MVC4易居的网开发框架之附件上传组件上传的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！