视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
基于Jquery插件Uploadify实现实时显示进度条上传图片_jquery
2020-11-27 21:50:21 责编:小采
文档
先了解了解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图标!
  • 尺寸72px*72px,png格式,建议使用 图标PSD模板 制作
  • 2、Javascript代码(关键部分)

    
    
    

    3、服务器端处理文件上传

    /// 
     /// 上传文件
     /// 
     public class UploadApplogo : IHttpHandler
     {
     System.Drawing.Image image, image, 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);
    
     //生成缩略图
     image = image.GetThumbnailImage(, , callb, new System.IntPtr());
     //把缩略图保存到指定的虚拟路径
     image.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\_" + fileName);
     //释放image对象的资源
     image.Dispose();
    
     //生成缩略图
     image48 = image.GetThumbnailImage(48, 48, callb, new System.IntPtr());
     image48.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\48_" + fileName);
     image48.Dispose();
    
     //生成缩略图
     image32 = image.GetThumbnailImage(32, 32, callb, new System.IntPtr());
     image32.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\32_" + fileName);
     image32.Dispose();
    
     //生成缩略图
     image16 = image.GetThumbnailImage(16, 16, callb, 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、效果如下

    下载本文
    显示全文
    专题