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

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

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

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

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery
， 插件
， 上传图片
， uploadify
进度条
uploadify上传进度条、jquery实时进度条、jquery进度条实时显示、jquery文件上传进度条、jquery上传进度条插件，以便于您获取更多的相关知识。

时间： 2024-04-11 16:10:42

基于Jquery插件Uploadify实现实时显示进度条上传图片_jquery的相关文章

自己动手制作基于jQuery的Web页面加载进度条插件_jquery

静态效果的实现 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { positio

基于jQuery实现模拟页面加载进度条_jquery

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: .loading{position:relative;top:0;left:0} .tip1{float:left;background:#A7

基于jQuery插件实现环形图标菜单旋转切换特效_jquery

feature.presenter.1.5.css body { margin: 0; font-family: Tahoma; } .feature-presenter { position: absolute; } .feature-presenter-icon { background-color: white; text-align: center; transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95); -we

基于jQuery插件实现点击小图显示大图效果_jquery

本文实例为大家分享了基于jQuery实现点击小图显示大图效果,供大家参考,具体内容如下 显示以下效果: 点击任意一张图片会显示大图: 1.前台界面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="练习.WebForm1" %> <!DOCTYPE html PUBLIC "-/

Jquery Uploadify上传带进度条介绍

 本篇文章主要是对Jquery Uploadify上传带进度条的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %>   <html xmlns="http://

Jquery Uploadify上传带进度条的简单实例_jquery

复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" ru

JS插件plupload.js实现多图上传并显示进度条_javascript技巧

本文实例为大家分享了plupload.js多图上传的具体代码,供大家参考,具体内容如下 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

JQuery和PHP结合实现动态进度条上传显示_jquery

Windows 环境下的修改方法 第一步:修改在php5下POST文件大小的限制 1.编修php.ini 找到:max_execution_time = 30 ,这个是每个脚本运行的最长时间,单位秒,改为:max_execution_time = 150 找到:max_input_time = 60,这是每个脚本可以消耗的时间,单位也是秒,修改为: max_input_time = 300 找到:memory_limit = 128M,这个是脚本运行最大消耗的内存,根据你的需求更改数值,这里修改

谢谢了-jquery 插件uploadify

问题描述 jquery 插件uploadify Uncaught TypeError: Cannot read property 'queueData' of undefined 大神们,使用uploadify出现上面的错误是什么原因啊. 解决方案 这需要swf,引入了swfobject.js吗? 解决方案二: 你的使用方法不当啊,导入格式不对 解决方案三: 这样的结构对吗 解决方案四: 你怎么用的,看错误提示应该你的queueData对象被重写过或者调用过destroy方法销毁对象过了