基于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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
Vue-component全局注册实例
Sep 06 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
vue 给数组添加新对象并赋值
Apr 20 Vue.js
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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
php表单转换textarea换行符的方法
2010/09/10 PHP
php模板函数 正则实现代码
2012/10/15 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
Knockoutjs的环境搭建教程
2012/11/26 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
JS实现放烟花效果
2020/03/10 Javascript
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Python微信公众号开发平台
2018/01/25 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
django-filter和普通查询的例子
2019/08/12 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
linux面试题参考答案(7)
2014/07/24 面试题
超市开业庆典策划方案
2014/05/14 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
nginx七层负载均衡配置详解
2022/07/15 Servers