Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件

0 ajaxFileUpload简介

ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件，使用过程中发现很多与这个同名的，基于原始版本基础之上修改过的插件，文件版本比较多，我把我自己使用的ajaxFileUpload文件上传到博客园上了，想要使用的朋友可以下载：http://小哉。JB 51。net/201611/马援/ajaxfileupload(jb51.net ).rar。

整个插件源码不到200行，实现非常简单，大致原理就是通过射流研究…动态创建隐藏的表单，然后进行提交操作，达到附件上传的目的，主要实现在源码里都有注释，不难理解，我们也可以基于此简单版本实现更复杂的操作。

1 ajaxFileUpload使用说明

ajaxFileUpload的使用也很简单，调用ajaxFileUpload方法即可，各配置项详细说明如下：

$.ajaxFileUpload({ type: 'post '，//请求类型：帖子或去拿，当要使用数据提交自定义参数时一定要设置为发布URL : '/共享/上传',//文件上传的服务器端请求地址secureuri: false，//是否启用安全提交，一般默认为错误的就行，不用特殊处理文件元素Id: '文件图片',//文件上传控件的编号输入类型='文件id='文件图片'名称='文件图片'接受='。jpg .jpeg，2000 .巴布亚新几内亚. BMP ' onChange=' FilePictureChange()'/DataType : ' JSON '，//返回值类型，一般设置为json，还支持html \ xml \脚本类型data: { 'id': '1 '，' name': 'test' }，//用于邮政请求提交自定义参数成功：函数（数据、状态){ //服务器成功响应处理函数}，错误：函数（数据，状态，e) { //服务器响应失败处理函数} });首先在页面添加对JQuery及ajaxFileUpload的引用，这里的JQuery用的2.1.4版本，经测试用各个版本基本没什么影响脚本src='http:/./Content/js/jquery-2。1 .4 .量滴js '/script脚本src=' http :/./Content/js/Ajax文件上传。js /脚本页面添加类型为文件的投入标签复制代码代码如下：输入类型='文件id='文件图片'名称='文件图片'接受='。jpg .jpeg，2000 .巴布亚新几内亚. BMP ' onChange=' FilePictureChange()'/通过接受可以限定打开文件选择对话框后，默认能选择的文件类型。文件类型的定义主要有以下这些

*.3gpp音频/3gpp，视频/3gpp音频/视频

*.ac3音频/ac3 AC3音频

*.高级流格式

*.音频/基本音频

*.钢性铸铁文本/css层叠样式表

*.战斗支援车文本/csv逗号分隔值

*.文档应用程序/微软单词文档

*.点应用/msword MS Word模板

*.文档类型定义

*.图形数据库

*.图形交换格式

*.可交换的图像格式图像/gif图形交换格式

*.超文本标记语言

*.超文本标记语言

*.jp2图像/JPEG 2000

*.联合图象专家组图像/jpeg

*.联合图象专家组图像/jpeg JPEG

*.联合图象专家组图像/jpeg

*.射流研究…文本/javascript，应用程序/javascript

*.应用程序/对象符号

*.mp2音频/mpeg，视频/mpeg音频/视频流，第二层

*.mp3音频/mpeg音频流，第三层

*.mp4音频/mp4，视频/mp4 MPEG-4音频/视频

*.运动图象专家组视频/mpeg视频流，第二层

*.每加仑行驶英里数视频/mpeg视频流，第二层

*.（同massivelyparallelprocessing）大规模并行处理应用/vnd。ms-项目女士项目

*.ogg应用程序/ogg，音频/ogg Ogg Vorbis

*.可移植文档格式文件的扩展名（portable document format的缩写）应用/pdf可移植文档格式

*.巴布亚新几内亚图像/巴布亚新几内亚便携式网络图形

*.罐应用程序/vnd.ms-powerpoint MS PowerPoint模板

*.再附言应用程序/vnd.ms-powerpoint

*.ppt应用程序/vnd.ms-powerpoint MS PowerPoint演示文稿

*.普适文本格式应用程序/rtf，文本/rtf富文本格式

*.简单矢量格式

*.标签图像文件格式。图像/tiff标记图像格式文件

*.一口图像/tiff标记图像格式文件

*.文本/纯文本

*.工作数据库

*.工作文本文件

*.可扩展超文本标记语言

*.xlc应用程序/vnd.ms-excel MS Excel图表

*.xlm应用程序/vnd.ms-excel MS Excel宏

*.xls应用程序/vnd.ms-excel

*.xlt应用程序/vnd.ms-excel MS Excel模板

*.xlw应用程序/vnd.ms-excel MS Excel工作区

*.可扩展标记语言

*.压缩应用/压缩存档

我这里没有单独放上传按钮，添加了onchange事件，在选择文件后立即上传文件，onchange时间定义如下。

函数filePictureChange() { $ .Ajax文件上传({ URL : '/共享/上传'，//用于文件上传的服务器端请求地址键入：“post”，secureuri: false，//一般设置为错误的文件元素Id: '文件图片',//文件上传空间的编号属性dataType: 'json '，//返回值类型一般设置为json成功：函数（数据，状态){ //服务器成功响应处理函数警报（数据。文件名);警报(数据。文件路径)；警报(数据。文件大小)；}，错误：函数（数据，状态，e){ //服务器响应失败处理函数警报(e );} });};后台控制器处理方法如下，使用讯息摘要5处理，判断文件是否已经存在，避免文件重复上传。

///摘要///附件上传////summary///returns/returns公共操作结果Upload(){ HttpFileCollection files=System .网络。httpcontext。当前。请求。文件；如果(文件计数==0)返回Json('Faild '，JsonRequestBehavior .允许get)；MD5 MD5哈希值=新的MD5 crypto serviceprovider()；/*计算指定溪流对象的哈希值*/byte[]arrbytHashValue=MD5哈希器.ComputeHash(文件[0]。InputStream)；/*由以连字符分隔的十六进制对构成的字符串，其中每一对表示价值中对应的元素；例如“F-2C-4A”*/字符串系统数据=系统.BitConverter。ToString(arrbytHashValue).替换('-',' ');字符串文件扩展=路径GetExtension(文件[0]。FileName)；字符串上传日期=日期时间.现在。to字符串(' yyyyMMdd ')；字符串虚拟路径=字符串.格式(“/Data/component attachments/{ 0 }/{ 1 } { 2 }”、uploadDate、strHashData、FileEextension)；字符串完整文件名=服务器。映射路径(VirtualPath)；//创建文件夹，保存文件字符串路径=路径GetDirectoryName(完整文件名);目录创建目录(路径);if(！系统。存在（完整文件名)){文件[0]。另存为（完整文件名);}字符串文件名=文件[0]。文件名。子字符串(文件[0]。文件名。文件[0]中(' \ \ ')1的最后一个索引。文件名。长度-文件[0]。文件名。的最后一个索引(' \ \ ')-1)；字符串fileSize=GetFileSize(文件[0]。内容长度)；返回Json(new { FileName=fileName，FilePath=virtualPath，FileSize=fileSize }，' text/html '，JsonRequestBehavior .允许get)；} ///摘要///获取文件大小////summary////param name=' bytes '/param////返回/返回私有字符串GetFileSize(长字节){ long kblength=1024 long MBle length=1024 * 1024 if(字节kb length)返回字节. ToString()“B”；if(字节长度)返回十进制。四舍五入（十进制。除（字节，kblength)，2).ToString()" KB "；否则返回十进制。四舍五入（十进制。除（字节，mbLength)，2).ToString()" MB "；}2 ajaxFileUpload使用过程中的一些问题2.0 jQuery.handleError不是一个函数

解决方法：经测试handlerError错误错误只在jquery-1.4.2之前的版本中存在，以后版本中都没有这个函数了，因此在将handleError这个函数复制到ajaxFileUpload.js中，就行了

uploadHttpData:函数(r，type) { var data=！类型；数据=类型=='xml' ||数据？响应XML :响应文本；//如果类型为“剧本”，则在全局上下文中对其求值If(类型==“脚本”)。jquery。全球评估(数据)；//获取Java Script语言对象，如果使用了JSON .if(type==' JSON ')eval(' data=' data ')；//eval(' data=\ ' ' data ' \ ')；//计算html if(type==' html ')jQuery(' div ')内的脚本html(数据)。eval脚本()；返回数据；}，handleError:函数(s，xhr，status，e) { //如果指定了本地回调，则在(错误){错误。呼叫(上下文| | s，xhr，状态，e)时激发它；} //如果(s.global) { (s.context？jQuery(s . context): jQuery。事件).trigger('ajaxError '，[xhr，s，e])；} }更多精彩内容，请点击《jQuery上传操作汇总》 ,进行深入学习和研究。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。