最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

基于Jquery插件Uploadify实现实时显示进度条上传图片_jquery

来源:懂视网 责编:小采 时间:2020-11-27 21:50:21
文档

基于Jquery插件Uploadify实现实时显示进度条上传图片_jquery

基于Jquery插件Uploadify实现实时显示进度条上传图片_jquery:先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案。作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性。 Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下: 1)、支
推荐度:
导读基于Jquery插件Uploadify实现实时显示进度条上传图片_jquery:先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案。作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性。 Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下: 1)、支
先了解了解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, 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, 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、效果如下

    文档

    基于Jquery插件Uploadify实现实时显示进度条上传图片_jquery

    基于Jquery插件Uploadify实现实时显示进度条上传图片_jquery:先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案。作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性。 Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下: 1)、支
    推荐度:
    标签: 显示 上传 进度条
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top