先了解了解Uploadify，具体内容如下
Uploadify是一个简单易用的多文件上传方案。作为一个Jquery插件，Uploadify使用简单，并具有高度的定制性。
Uploadify特性：
Uploadify简单说来，是基于Jquery的一款文件上传插件。它的功能特色总结如下：
1）、支持单文件或多文件上传，可控制并发上传的文件数 2）、在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java…… 3）、通过参数可配置上传文件类型及大小限制 4）、通过参数可配置是否选择文件后自动上传 5）、易于扩展，可控制每一步骤的回调函数（onSelect,onCancel……） 6）、通过接口参数和CSS控制外观 7）、提供上传进度的事件回调，实时显示上传进度 8）、开始之前要先下载插件安装包到本地并引用，详细实现请看代码注释，下面开始代码。
1、HTML代码
- logo图标：
- logo" name="app_logo" class="appipt1" value="<%=applogo %>" />
- display: none; margin-left: 5px; padding-left: 20px; color: #EA5200; font-size: 12px; background: url('Images/icon_03.gif' ) no-repeat 0px 0px;" id="textporApplogo"> 请上传logo图标！
-
logo" class="fileQueue">
logo_tab" width="50%" border="0" cellspacing="0" cellpadding="0" align="center" class="grey999" style="display: none; margin-left: 90px; float: left;">
(64*64) ottom">
(48*48) ottom">
(32*32) ottom">
(16*16)2、Javascript代码（关键部分）
rush:js;"> $("#webApplogo").uploadify({ 'uploader': 'js/uploadify-v2.1.4/uploadify.swf',//进度条，Uploadify里面含有 'script': 'UploadApplogo.ashx',//一般处理程序 'cancelImg': 'js/uploadify-v2.1.4/cancel.png',//取消图片路径 'folder': 'Imagelogo',//上传文件夹名 'auto': true,//文件添加到上传队列后，自动进行上传。默认为false 'multi': false,//是否允许多文件上传。默认为false 'fileExt':'*.gif;*.jpg;*.jpeg;*.png',//允许上传的文件类型，使用分号(”;)”分割 例如:*.jpg;*.gif,默认为null(所有文件类型) 'fileDesc':'不超过2M的图片 (*.gif;*.jpg;*.png)','sizeLimit': 2048000,//允许上传的文件大小(kb) 此为2M 'onSelectOnce': function(event,data) { //在单文件或多文件上传时，选择文件时触发 //event 事件对象(the event object) //data 选择的操作信息 //data.filesSelected 选择文件操作中选中的文件数量 $('#status-message').text(data.filesSelected + ' 文件正在等待上传…….'); },'onComplete': function(event,queueID,fileObj,response,data) {//当单个文件上传完成后触发 //event:事件对象(the event object) //ID:该文件在文件队列中的唯一表示 //fileObj:选中文件的对象，他包含的属性列表 //response:服务器端返回的Response文本，我这里返回的是处理过的文件名称 //data：文件队列详细信息和文件上传的一般数据alert("<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>:" + fileObj.name + " <a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>成功！"); //设置<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a><a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a> $("#app<a href="https://www.jb51.cc/tag/logo/" target="_blank" class="keywords">logo</a>").attr("value",response); //设置输入框的值 $("#text_webApp<a href="https://www.jb51.cc/tag/logo/" target="_blank" class="keywords">logo</a>").attr("value",fileObj.name); //设置<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>路径 $("#img_64").attr("src","Image<a href="https://www.jb51.cc/tag/logo/" target="_blank" class="keywords">logo</a>/64_"+response); $("#img_48").attr("src","Image<a href="https://www.jb51.cc/tag/logo/" target="_blank" class="keywords">logo</a>/48_"+response); $("#img_32").attr("src","Image<a href="https://www.jb51.cc/tag/logo/" target="_blank" class="keywords">logo</a>/32_"+response); $("#img_16").attr("src","Image<a href="https://www.jb51.cc/tag/logo/" target="_blank" class="keywords">logo</a>/16_"+response); //<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>路径设置完成后，<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a> $("#webApp<a href="https://www.jb51.cc/tag/logo/" target="_blank" class="keywords">logo</a>_tab").css("<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play","block");},'onError': function(event,fileObj) {//当单个文件上传出错时触发
alert("文件:" + fileObj.name + " 上传失败！");
},'buttonImg':'Images/bn_04.gif',//浏览按钮的图片路径
'width':60,//浏览按钮的宽和高
'height':24,'queueID':'QID_webApplogo'//页面上作为文件上传队列的元素的ID
});3、服务器端处理文件上传
rush:csharp;"> ////// 上传文件 /// public class UploadApplogo : IHttpHandler { System.Drawing.Image image,image64,image48,image32,image16; //定义Image类的对象 protected string imagePath;//图片路径 protected string imageType;//图片类型 protected string imageName;//图片名称 protected string fileName;//图片名称 //提供一个回调方法,用于确定Image对象在执行生成缩略图操作时何时提前取消执行 //如果此方法确定 GetThumbnailImage 方法应提前停止执行，则返回 true；否则返回 false System.Drawing.Image.GetThumbnailImageAbort callb = null;public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile UploadImage = context.Request.Files["FileData"];
//物理路径
string uploadpath = HttpContext.Current.Server.MapPath(context.Request["folder"] + "\");if (UploadImage != null)
{
//是否有目录，如没有就创建
if (!Directory.Exists(uploadpath))
{
Directory.CreateDirectory(uploadpath);
}
//客户端文件完全名称
string filename = UploadImage.FileName;
string extname = filename.Substring(filename.LastIndexOf(".") + 1);
//为不重复，设置文件名
fileName = Guid.NewGuid().ToString() + "." + extname;//context.Response.Write("1"); context.Response.Write(fileName);}
else
{
context.Response.Write("0");
}string mPath;
imagePath = UploadImage.FileName;
//取得图片类型
imageType = imagePath.Substring(imagePath.LastIndexOf(".") + 1);
//取得图片名称
imageName = imagePath.Substring(imagePath.LastIndexOf("\") + 1);
Stream imgStream = UploadImage.InputStream;//流文件，准备读取上载文件的内容
int imgLen = UploadImage.ContentLength;//上载文件大小//建立虚拟路径
mPath = HttpContext.Current.Server.MapPath(context.Request["folder"]);
//保存到虚拟路径
UploadImage.SaveAs(mPath + "\" + fileName);
////显示原图
//imageSource.ImageUrl = "upFile/" + imageName;
//为上传的图片建立引用
image = System.Drawing.Image.FromFile(mPath + "\" + fileName);//生成缩略图
image64 = image.GetThumbnailImage(64,64,callb,new system.intPtr());
//把缩略图保存到指定的虚拟路径
image64.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\64_" + fileName);
//释放image64对象的资源
image64.dispose();//生成缩略图
image48 = image.GetThumbnailImage(48,48,new system.intPtr());
image48.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\48_" + fileName);
image48.dispose();//生成缩略图
image32 = image.GetThumbnailImage(32,32,new system.intPtr());
image32.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\32_" + fileName);
image32.dispose();//生成缩略图
image16 = image.GetThumbnailImage(16,16,new system.intPtr());
image16.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\16_" + fileName);
image16.dispose();//释放image对象占用的资源
image.dispose();
}public bool IsReusable
{
get
{
return false;
}
}
}4、效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
相关推荐
