jQuery.Uploadify插件实现带进度条的批量上传功能

本文实例讲述了jQuery.Uploadify插件实现带进度条的批量上传功能。分享给大家供大家参考，具体如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"><title>Jquery Uploadify上传带进度条，且多参数</title><link href="js/jquery.uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/jquery.uploadify-v2.1.4/swfobject.js"></script><script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script><script type="text/javascript">$（document）.ready（function （） {$（"#pics"）.hide（）;$（"#uploadify"）.uploadify（{"uploader": "js/jquery.uploadify-v2.1.4/uploadify.swf", //uploadify.swf文件的路径"script": "UploadHandler.ashx?type=add", //处理文件上传的后台脚本的路径"cancelImg": "js/jquery.uploadify-v2.1.4/cancel.png","buttonText": "Select Image","folder": "UploadFile/<% = DateTime.Now.ToString（"yyyyMMdd"） %>/", //上传文件夹的路径按20130416"queueID": "fileQueue", //页面中，你想要用来作为文件队列的元素的id"auto": false, //当文件被添加到队列时，自动上传"multi": true, //设置为true将允许多文件上传"fileExt": "*.jpg;*.gif;*.png", //允许上传的文件后缀"queueSizeLimit": 5,"fileDesc": "Web Image Files （.JPG, .GIF, .PNG）", //在浏览窗口底部的文件类型下拉菜单中显示的文本"sizeLimit": 1024000, //上传文件的大小限制，单位为字节 1024*1000 1M"onComplete": function （event, queueID, fileObj, response, data） {var html = "";html += "<li class="myli">";html += "<img src="" + response + "" class="myimg"/>";html += "<div style=" position:absolute; right:8px; bottom:5px">";html += "<img title="点击删除" src="Images/delete.gif" onclick="delImage（"" + response + ""）;" />";html += "</div>";html += "</li>";$（"#pics"）.append（html）;},"onAllComplete": function （event, data） { //当上传队列中的所有文件都完成上传时触发//alert（data.filesUploaded + " 个文件上传成功！"）;$（"#pics"）.fadeIn（）;}}）;}）;function uploadpara（） {//自定义传递参数$（"#uploadify"）.uploadifySettings（"scriptData", { "name": $（"#txtName"）.val（）, "albums": $（"#txtAlbums"）.val（） }）;$（"#uploadify"）.uploadifyUpload（）;}function delImage（picurl） {jsonAjax（"UploadHandler.ashx", "type=del&picurl=" + picurl, "text", callBackTxt）;}function jsonAjax（url, param, datat, callback） {$.ajax（{type: "post",url: url,data: param,dataType: datat,success: callback,error: function （） {jQuery.fn.mBox（{message: "恢复失败"}）;}}）;}function callBackTxt（data） {var o = data;if （o ！= ""） {var e = $（".myli img[src="" + data + ""]"）;e.each（function （） {$（this）.parent（）.remove（）;}）} else {alert（"删除失败"）;}};</script><style type="text/css">.myul{ margin:5px 5px 5px 5px; padding:0px;}.myli{list-style-type:none;width:150px;height:150px;display:inline;position:relative;}.myimg{width:120px;height:120px;}</style></head><body><form id="form1" runat="server"><div><div id="fileQueue"></div><input type="file" name="uploadify" id="uploadify" /><div id="pics"><ul class="myul"></ul></div><div><p><a href="javascript:void（0）;" onclick="uploadpara（）;">上传</a>|<a href="javascript:$（"#uploadify"）.uploadifyClearQueue（）">取消上传</a></p></div></div></form></body></html>

<%@ WebHandler Language="C#" Class="UploadHandler" %>using System;using System.Web;using System.IO;/// <summary>/// UploadHandler文件上传/// </summary>public class UploadHandler : IHttpHandler{public void ProcessRequest（HttpContext context）{context.Response.ContentType = "text/plain";context.Response.Charset = "utf-8";string type = context.Request["type"];if （type=="add"）{HttpPostedFile file = context.Request.Files["Filedata"];string uploadPath = HttpContext.Current.Server.MapPath（@context.Request["folder"]）;string name = context.Request.Params["name"]; //获取传递的参数string albums = context.Request.Params["albums"];if （file ！= null）{if （！Directory.Exists（uploadPath））{Directory.CreateDirectory（uploadPath）;}file.SaveAs（Path.Combine（uploadPath, file.FileName））;context.Response.Write（@context.Request["folder"] + file.FileName）;}else{context.Response.Write（""）;}}else if （type == "del"）{string picurl = context.Request["picurl"];try{File.Delete（context.Server.MapPath（picurl））;context.Response.Write（picurl）;}catch{context.Response.Write（""）;}}else{ }}public bool IsReusable{get{return false;}}}

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格（table）操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。