jQuery.Uploadify插件实现带进度条的批量上传功能
本文实例讲述了jQuery.Uploadify插件实现带进度条的批量上传功能。分享给大家供大家参考，具体如下：
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="UpLoad.aspx.cs"Inherits="UploadifyDemo_UpLoad"%>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>JqueryUploadify上传带进度条，且多参数</title>
<linkhref="js/jquery.uploadify-v2.1.4/uploadify.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="js/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="js/jquery.uploadify-v2.1.4/swfobject.js"></script>
<scripttype="text/javascript"src="js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
<scripttype="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':'SelectImage',
'folder':'UploadFile/<%=DateTime.Now.ToString("yyyyMMdd")%>/',//上传文件夹的路径按20130416
'queueID':'fileQueue',//页面中，你想要用来作为文件队列的元素的id
'auto':false,//当文件被添加到队列时，自动上传
'multi':true,//设置为true将允许多文件上传
'fileExt':'*.jpg;*.gif;*.png',//允许上传的文件后缀
'queueSizeLimit':5,
'fileDesc':'WebImageFiles(.JPG,.GIF,.PNG)',//在浏览窗口底部的文件类型下拉菜单中显示的文本
'sizeLimit':1024000,//上传文件的大小限制，单位为字节1024*10001M
'onComplete':function(event,queueID,fileObj,response,data){
varhtml="";
html+="<liclass=\'myli\'>";
html+="<imgsrc=\""+response+"\"class=\'myimg\'/>";
html+="<divstyle=\"position:absolute;right:8px;bottom:5px\">";
html+="<imgtitle=\"点击删除\"src=\"Images/delete.gif\"onclick=\"delImage(\'"+response+"\');\"/>";
html+="</div>";
html+="</li>";
$("#pics").append(html);
},
'onAllComplete':function(event,data){//当上传队列中的所有文件都完成上传时触发
//alert(data.filesUploaded+'个文件上传成功!');
$("#pics").fadeIn();
}
});
});
functionuploadpara(){
//自定义传递参数
$('#uploadify').uploadifySettings('scriptData',{'name':$('#txtName').val(),'albums':$('#txtAlbums').val()});
$('#uploadify').uploadifyUpload();
}
functiondelImage(picurl){
jsonAjax("UploadHandler.ashx","type=del&picurl="+picurl,"text",callBackTxt);
}
functionjsonAjax(url,param,datat,callback){
$.ajax({
type:"post",
url:url,
data:param,
dataType:datat,
success:callback,
error:function(){
jQuery.fn.mBox({
message:'恢复失败'
});
}
});
}
functioncallBackTxt(data){
varo=data;
if(o!=""){
vare=$(".myliimg[src='"+data+"']");
e.each(function(){
$(this).parent().remove();
})
}else{
alert("删除失败");
}
};
</script>
<styletype="text/css">
.myul
{
margin:5px5px5px5px;
padding:0px;
}
.myli
{
list-style-type:none;
width:150px;
height:150px;
display:inline;
position:relative;
}
.myimg
{
width:120px;
height:120px;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
<divid="fileQueue"></div>
<inputtype="file"name="uploadify"id="uploadify"/>
<divid="pics">
<ulclass="myul">
</ul>
</div>
<div>
<p>
<ahref="javascript:void(0);"onclick="uploadpara();">上传</a>|
<ahref="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
</p>
</div>
</div>
</form>
</body>
</html>
<%@WebHandlerLanguage="C#"Class="UploadHandler"%>
usingSystem;
usingSystem.Web;
usingSystem.IO;
///<summary>
///UploadHandler文件上传
///</summary>
publicclassUploadHandler:IHttpHandler
{
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
context.Response.Charset="utf-8";
stringtype=context.Request["type"];
if(type=="add")
{
HttpPostedFilefile=context.Request.Files["Filedata"];
stringuploadPath=HttpContext.Current.Server.MapPath(@context.Request["folder"]);
stringname=context.Request.Params["name"];//获取传递的参数
stringalbums=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("");
}
}
elseif(type=="del")
{
stringpicurl=context.Request["picurl"];
try
{
File.Delete(context.Server.MapPath(picurl));
context.Response.Write(picurl);
}
catch
{
context.Response.Write("");
}
}
else
{}
}
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。