Jquery-uploadify多文件上传插件使用介绍

时间:2021-05-30 06:05:09

Jquery-uploadify多文件上传插件使用起来非常的给力,在此记录一下使用方法。

query-uploadify插件的属性设置

<script src="JS/jquery.min.js" type="text/javascript"></script><script src="JS/jquery.uploadify/jquery.uploadify.min.js" type="text/javascript"></script><script type="text/javascript">
$(function () {
$("#uploadify").uploadify({
'swf': '/JS/jquery.uploadify/uploadify.swf',//flash地址
'uploader': 'UploadHandler.ashx',//后台处理程序
'buttonImage': '/img/bgimg.jpg',//按钮图片
'auto': true,//选中后是否自动上传
'multi': true,//是否可以多文件上传
'queueID': 'fileQueue',//成功后列表追加对象
'width': 157,
'height': 45,
'fileSizeLimit': '50MB',//文件大小限制
'fileTypeExts': '*.docx;*.doc;*.ppt;*.pptx;*.pdf;*.caj;*.txt;*.rar;*.zip;*.jpg;*.gif;',//格式限制
'fileTypeDesc:': '请选择docx doc ppt pptx pdf caj txt rar zip jpg gif文件',//格式提示
'progressData': 'all',//进度显示样式
'removeCompleted': false,//是否移除队列
'overrideEvents': ['onSelectError', 'onDialogClose'],//重写事件
//返回一个错误,选择文件的时候触发
'onSelectError': function (file, errorCode, errorMsg) {
switch (errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的" + $('#uploadify').uploadify('settings', 'queueSizeLimit') + "个文件!");
break;
case -110:
alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#uploadify').uploadify('settings', 'fileSizeLimit') + "大小!");
break;
case -120:
alert("文件 [" + file.name + "] 大小异常!");
break;
case -130:
alert("文件 [" + file.name + "] 类型不正确!");
break;
}
return true;
},
//检测FLASH失败调用
'onFallback': function () {
alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
} });
}); </script>
<!--Jquery-uploadify调用-->
<body>
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>|
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
</p>
<input type="file" name="uploadify" id="uploadify" />
<div id="fileQueue" style=""></div>
</body>

处理文件UploadHandler.ashx.cs代码

较为基本的处理程序,接收uploadify文件数据进行处理保存。

/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class UploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8"; HttpPostedFile file = context.Request.Files["Filedata"];
string uploadPath =
HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\"; if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
file.SaveAs(uploadPath + file.FileName);
//下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
context.Response.Write("");
}
else
{
context.Response.Write("");
}
} public bool IsReusable
{
get
{
return false;
}
}
}

uploaddify相关链接

相关文章