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

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

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

时间: 2016-05-07

使用jquery.form.js实现图片上传的方法

本文实例讲述了使用jquery.form.js实现图片上传的方法.分享给大家供大家参考,具体如下: testupfile2.php <?php header('Content-type:text/html;charset=utf-8'); include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg', 'image/jpeg', 'image/png',

jQuery AjaxUpload 上传图片代码

本次使用AJAXUPLOAD做为上传客户端无刷上传插件,其最新版本为3.9,官方地址:http://valums.com/ajax-upload/ 在页面中引入 jquery.min.1.4.2.js 和 ajaxupload.js <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="Scripts/aj

基于JQuery实现图片上传预览与删除操作

本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码,经测试目前满足谷歌.火狐.360.IE6,7,8,9,10,11等浏览器,供大家参考,具体内容如下 1. preview.2.0.html <!DOCTYPE html> <html> <head> <title>上传图片预览</title> <meta http-equiv="content-type" content="text/html;

jquery实现图片上传前本地预览功能

本文实例为大家分享了jquery实现图片上传前预览的具体代码,供大家参考,具体内容如下 介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用.直接上代码. html部分: 复制代码 代码如下: <img id="pic" src="" > <input id="upload" name="file" accept="image/*

jQuery移动端图片上传组件

本文实例为大家分享了移动端图片上传组件,供大家参考,具体内容如下 Imageupload 使用File API+canvas 客户端压缩图片,并实现文件上传服务端 文件依赖 JQUERY 参数API loading:'.loading', 页面显示loading的图标selector url:'', 接收数据的api接口地址 maxFileSize:1010241024, 服务端支持的最大单文件大小 format:/^image/i, 支持的文件格式. images text ..... isC

jQuery实现图片上传和裁剪插件Croppie

在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求.最常见的就是各用户系统要求用户上传和裁剪头像的应用.今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件,它叫Croppie. 运行效果图: HTML 首先我们将相关js和css文件载入head中. <script src="jquery.min.js"></script> <script src="croppie.min.js"><

jquery实现多次上传同一张图片

话不多说,请看代码 $('input[type=file]').wrap('<form>').closest('form').get(0).reset(); wrap():$('p').wrap('div');===><div><p></p></div>; .closest():最接近的列表元素或者其子后代元素 get():$('p').get(0)获得第一个p元素的名称和值,这个方法得到的是dom元素,后面如果你再加jQuery方法的话就

jQuery实现本地预览上传图片功能

本文实例介绍了基于JQUERY扩展,图片上传预览插件,目前兼容浏览器(IE 谷歌 火狐) 不支持safari,分享给大家供大家参考,具体内容如下 HTML代码: <html> <head> <title>图片上传预览演示</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javas

基于jquery实现图片上传本地预览功能

当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的,如果网速慢或图片有问题,这样不但浪费客户时间同时也浪费服务器资源了,下面我们介绍利用js上传图片时本地实现预览,希望此方法对各位有所帮助哦. 一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL): 把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.U

Struts2+jquery.form.js实现图片与文件上传的方法

本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法.分享给大家供大家参考,具体如下: jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件.官方网站:http://plugins.jquery.com/form/ 结合Struts2三步轻松实现文件上传 一般是针对一个页面可能不止一个Form表单,所以在一个面提交表单会影响到另一个表单,为此,图片上传表单就可以使用无刷新提交方式上传,也就是异步上传,这时jquery.from.js就派上用

使用jQuery.form.js/springmvc框架实现文件上传功能

使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享. 重点: html表格三要素: action="fileUpload/fileUpload" method="post" enctype="mul

ajaxFileUpload.js插件支持多文件上传的方法

前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(ne

jQuery+ajax简单实现文件上传的方法

本文实例讲述了jQuery+ajax简单实现文件上传的方法.分享给大家供大家参考,具体如下: 可以通过ajax来提交表单,而不会刷新页面.主要使用的方法是 $("#formID").ajaxSubmit()方法. 1.要引入js插件 需要下载的附件:jquery.form.js 2.页面代码: <script src="project/js/jquery.form.js" type="text/javascript"></scr

vue中实现图片和文件上传的示例代码

html页面 <input type="file" value="" id="file" @change='onUpload'>//注意不能带括号 js代码 methods: { //上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test');

原生JS实现前端本地文件上传

本文实例为大家分享了JS实现前端本地文件上传的具体代码,供大家参考,具体内容如下 通过input type = file来选择本地文件 <div> <form> <input type="file" id="file-input" name="fileContent"> </form> </div> var fileInput = document.querySelector('#fil

struts2+jsp实现文件上传的方法

本文实例讲述了struts2+jsp实现文件上传的方法.分享给大家供大家参考.具体如下: 1. java代码: package com.wang.test; import java.io.InputStream; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.Action; import com.opensymphony.xwork2.ActionSupport; public cla

JavaScript实现form表单的多文件上传

form表单的多文件上传,具体内容如下 formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单 使用<form>表单初始化FormData对象的方式上传文件 <!--文件上传--> <form id="uploadForm" enctype="multipart/form-data"> <div class="row" style="margin-top:

node.js express框架实现文件上传与下载功能实例详解

本文实例讲述了node.js express框架实现文件上传与下载功能.分享给大家供大家参考,具体如下: 背景 昨天吉视传媒的客户对IPS信息发布系统又提了一个新需求,就是发布端发送消息时需要支持附件的上传,而接收端可以对发布端上传的附件进行下载:接收端回复消息时也需要支持上传附件,发布端可以对所有接收端上传的附件进行打包下载. 功能实现 前台部分 前台使用webUploader插件即可,这是百度开发的一款文件上传组件,具体使用查看它的API即可.这个项目之前开发的时候前台使用了angular.