jquery插件上传实现带进度条的文件批量上传

有时项目中需要一个文件批量上传功能时，个人认为上传是快速简便的解决方案，分享给大家供大家参考，具体如下

先上效果图：

具体代码如下：

在页面中如下

完整页面代码

% @ Page Language=' c# ' AutoEventWireup=' true ' CodeFile=' Default。aspx。cs ' Inherits=' _ Default ' %！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title文件批量上传演示/标题！-引入jquery-script src=' http : js/jquery-1。11 .3 .量滴js '/脚本！-引入上传脚本类型=' text/JAVAScript ' src=' http : uploadify/jquery。上传。js /脚本链接类型=' text/CSS ' href=' uploadify/uploadify。CSS ' rel='样式表'/脚本类型=' text/JavaScript ' $(function(){ var guid=' %=Request[' guid ']% '；定义变量类型=' %=请求[' type ']% '；if(guid==null | | guid==' '){ guid=new guid()；}如果(键入！=null){ type=type '/'；} $(“# file _ upload”).uploadify({ ' swf ' : ' uploadify/uploadify。' swf '，//FLash文件路径按钮文本' : '浏览', //按钮文本上传程序' : '上传处理程序。阿什克斯。guid=' guid，//处理ASHX页面formData ' : { ' folder ' : ' picture '，' isCover': 1 }，//传参数queueID': '文件队列',//队列的ID 'queueSizeLimit': 10，//队列最多可上传文件数量，默认为999 'auto': false，//选择文件后是否自动上传，默认为true 'multi': true，//是否为多选，默认为true 'removeCompleted': true，//是否完成后移除序列，默认为true 'fileSizeLimit': '0 '，//单个文件大小，0为无限制，可接受千字节、兆字节、千兆字节等单位的字符串值文件类型描述' : '所有文件',//文件描述fileTypeExts ' : ' * .*', //上传的文件后缀过滤器onQueueComplete':函数(queueData) { //所有队列完成后事件警报('上传完毕！');}、“OnError”:函数（事件、queueId、fileObj、ErrorObj){ alert(ErrorObj。类型):" ErrorObj。信息”；}、“onUploadStart”:函数（文件){ }、“onUploadStart成功":函数（文件、数据、响应){ //一个文件上传成功后的响应事件处理//var数据=$。parseJSON(数据);//如果数据是json格式//var errMsg=' '；} });});函数NewGuid(){ var guid=' '；for(var I=1；i=32I){ var n=数学。地板(数学。random()* 16.0).toString(16)；guid=n；if((I==8)| | | |(I==12)| |(I==16)| | |(I==20))guid='-'；}返回guid} //执行上传函数doUpload() { $('#file_upload ').uploadify('upload '，' * ')；}/脚本/床头表单id=' form 1 ' runat=' server ' enctype=' multipart/form-data ' div id=' file queue ' class=' file queue '/div输入类型=' file ' name=' file _ upload ' id=' file _ upload '/p输入类型=' button ' class=' short button ' id=' btnUpload ' onclick=' doUpload()' value='上传/input type=' button ' class=' short button ' id=' btncanceluload ' onclick=' $(' # file _ upload ').uploadify(' cancel ')"value="取消//p div id=' div _ show _ files '/div/div/form/body/html uploadhandler。ashx代码：

使用系统；使用系统网络.使用系统IO；公共类UploadHandler : IHttpHandler { public void process request(HttpContext context){ context .响应。内容类型='文本/纯文本；语境。请求。内容编码=系统文本。编码。getencoding(' UTF-8 ')；语境。响应。内容编码=系统文本。编码。getencoding(' UTF-8 ')；语境。响应。字符集=' UTF-8 '；如果(上下文。请求。文件。计数0){ #区域获取上传路径string uploadFolder=GetUploadFolder()；#endregion if(系统IO。目录。存在(uploadFolder)){//如果上传路径存在HttpPostedFile文件=上下文。请求文件['文件数据'];字符串文件路径=路径。组合（上传文件夹，文件. FIlename)；文件。另存为（文件路径);语境。响应。写入(' 0 ');} else { context .回应。写下(' 2 ');} } } public bool IsReuse { get { return false；} } ///摘要///返回不带后缀的文件名////summary////param name=' fileName '/param////返回/返回公共静态字符串GetFirstFileName(字符串fileName){ 0返回路径getfilename不带文本扩展(文件名);} ///摘要///获取上传目录////摘要////返回/返回公共静态字符串GetUploadFolder(){ string rootPath=HttpContext .当前。服务器。map path(' ~ ')；返回路径。组合(rootPath，‘test’)；}}文件上传。网默认有大小限制，像（同移民检查员移民检查)限制的30M默认请求大小。如果不想修改IIS，又想突破这个大小的限制，比如上传1GB大小的文件。

这是修改Web.config即可实现。

？可扩展标记语言版本='1.0 '编码='utf-8 '？- -配置系统. web编译debug=' true ' TargetFrameWork=' 4.0 '/httpruntimemaxrequestlength=' 1073741824 '/system。web！-用于设置文件上传的最大允许大小（单位：字节)- system.webServer安全请求筛选！-修改服务器允许最大长度(1GB)-请求限制maxAllowedContentLength=' 1073741824 '/请求填充/安全性/系统。web服务器/配置希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助。