当前位置:Gxlcms > JavaScript > 基于Jquery插件Uploadify实现实时显示进度条上传图片_jquery

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

时间:2021-07-01 10:21:17 帮助过:7人阅读

先了解了解Uploadify,具体内容如下

Uploadify是一个简单易用的多文件上传方案。作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性。

Uploadify特性:

Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下:

1)、支持单文件或多文件上传,可控制并发上传的文件数
2)、在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java……
3)、通过参数可配置上传文件类型及大小限制
4)、通过参数可配置是否选择文件后自动上传
5)、易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……)
6)、通过接口参数和CSS控制外观
7)、提供上传进度的事件回调,实时显示上传进度
8)、开始之前要先下载插件安装包到本地并引用,详细实现请看代码注释,下面开始代码。

1、html代码

  • 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、效果如下

以上就是本文的全部内容,希望对大家的学习有所帮助。

人气教程排行