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


Posted in Javascript onMarch 26, 2020

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

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

Uploadify特性:

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

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

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

1、html代码

<div id="webApplogo_file" style="display: block; width: 800px; background-color: #fff;">
  <ul>
  <li style="margin-left: 213px;"><span class="black_blod14">LOGO图标:</span></li>
  <li style="margin-left: 3px;">
   <input type="text" readonly="readonly" id="text_webApplogo" name="app_logo" class="appipt1" value="<%=applogo %>" /></li>
  <li style="padding-top: 1px;">
   <input type="file" id="webApplogo" name="webApplogo" />
  </li>
  <li><span style="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图标!</span></li>
  <li style="margin-left: 220px;"><span class="grey999" style="margin-left: 90px; float: left;">
   尺寸72px*72px,png格式,建议使用 图标PSD模板 制作</span>
   <div id="QID_webApplogo" class="fileQueue"></div>
   <table id="webApplogo_tab" width="50%" border="0" cellspacing="0" cellpadding="0"
   align="center" class="grey999" style="display: none; margin-left: 90px; float: left;">
   <tr>
    <td align="center" valign="bottom">
    <img style="width: 64px; height: 64px;" id="img_64" src="images/icon_02.gif" border="0" /><br />
    (64*64)
    </td>
    <td align="center" valign="bottom">
    <img style="width: 48px; height: 48px;" id="img_48" src="images/icon_02.gif" border="0" /><br />
    (48*48)
    </td>
    <td align="center" valign="bottom">
    <img style="width: 32px; height: 32px;" id="img_32" src="images/icon_02.gif" border="0" /><br />
    (32*32)
    </td>
    <td align="center" valign="bottom">
    <img style="width: 16px; height: 16px;" id="img_16" src="images/icon_02.gif" border="0" /><br />
    (16*16)
    </td>
   </tr>
   </table>
  </li>
  </ul>
 </div>

2、Javascript代码(关键部分)

$("#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("文件:" + fileObj.name + " 上传成功!");
  //设置图片名称
  $("#applogo").attr("value",response);
  //设置输入框的值
  $("#text_webApplogo").attr("value",fileObj.name);
  //设置图片路径
  $("#img_64").attr("src","Imagelogo/64_"+response);
  $("#img_48").attr("src","Imagelogo/48_"+response);
  $("#img_32").attr("src","Imagelogo/32_"+response);
  $("#img_16").attr("src","Imagelogo/16_"+response);
  //图片路径设置完成后,显示图片
  $("#webApplogo_tab").css("display","block");
  },
  'onError': function(event, queueID, fileObj) {//当单个文件上传出错时触发
  alert("文件:" + fileObj.name + " 上传失败!");
  },
  'buttonImg':'Images/bn_04.gif',//浏览按钮的图片路径
  'width':60,//浏览按钮的宽和高
  'height':24
  ,'queueID':'QID_webApplogo'//页面上作为文件上传队列的元素的ID
 });

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

/// <summary>
 /// 上传文件
 /// </summary>
 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上传操作汇总》,进行深入学习和研究。

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

Javascript 相关文章推荐
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
Vue表单类的父子组件数据传递示例
May 03 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
详解JavaScript的this指向和绑定
Sep 08 Javascript
jQuery实现三级菜单的代码
May 09 #Javascript
Boostrap入门准备之border box
May 09 #Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 #Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 #Javascript
jQuery绑定事件的几种实现方式
May 09 #Javascript
jquery实现左右无缝轮播图
Jul 31 #Javascript
node.js从数据库获取数据
May 08 #Javascript
You might like
解决CodeIgniter伪静态失效
2014/06/09 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Atom的python插件和常用插件说明
2018/07/08 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
Python input函数使用实例解析
2019/11/22 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
python自定义函数def的应用详解
2020/06/03 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
python获取linux系统信息的三种方法
2020/10/14 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
车队司机自我鉴定
2014/03/02 职场文书
村党支部书记承诺书
2014/05/29 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
Python Matplotlib库实现画局部图
2021/11/17 Python