快捷導(dǎo)航

基于Jquery插件Uploadify實(shí)現(xiàn)實(shí)時(shí)顯示進(jìn)度條上傳圖片

更新時(shí)間：2020年03月26日 09:03:04 作者：XuebinDing

這篇文章主要介紹了基于Jquery插件Uploadify實(shí)現(xiàn)實(shí)時(shí)顯示進(jìn)度條上傳圖片的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

先了解了解Uploadify，具體內(nèi)容如下

Uploadify是一個(gè)簡單易用的多文件上傳方案。作為一個(gè)Jquery插件，Uploadify使用簡單，并具有高度的定制性。

Uploadify特性：

Uploadify簡單說來，是基于Jquery的一款文件上傳插件。它的功能特色總結(jié)如下：

1）、支持單文件或多文件上傳，可控制并發(fā)上傳的文件數(shù)
2）、在服務(wù)器端支持各種語言與之配合使用，諸如PHP,.NET,Java……
3）、通過參數(shù)可配置上傳文件類型及大小限制
4）、通過參數(shù)可配置是否選擇文件后自動(dòng)上傳
5）、易于擴(kuò)展，可控制每一步驟的回調(diào)函數(shù)（onSelect, onCancel……）
6）、通過接口參數(shù)和CSS控制外觀
7）、提供上傳進(jìn)度的事件回調(diào)，實(shí)時(shí)顯示上傳進(jìn)度
8）、開始之前要先下載插件安裝包到本地并引用，詳細(xì)實(shí)現(xiàn)請看代碼注釋，下面開始代碼。

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圖標(biāo)：</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圖標(biāo)！</span></li>
  <li style="margin-left: 220px;"><span class="grey999" style="margin-left: 90px; float: left;">
   尺寸72px*72px，png格式,建議使用 圖標(biāo)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代碼（關(guān)鍵部分）

$("#webApplogo").uploadify({ 
  'uploader': 'js/uploadify-v2.1.4/uploadify.swf',//進(jìn)度條，Uploadify里面含有
  'script': 'UploadApplogo.ashx',//一般處理程序
  'cancelImg': 'js/uploadify-v2.1.4/cancel.png',//取消圖片路徑
  'folder': 'Imagelogo',//上傳文件夾名
  'auto': true, //文件添加到上傳隊(duì)列后，自動(dòng)進(jìn)行上傳。默認(rèn)為false
  'multi': false,//是否允許多文件上傳。默認(rèn)為false
  'fileExt':'*.gif;*.jpg;*.jpeg;*.png',//允許上傳的文件類型，使用分號(hào)(”;)”分割 例如:*.jpg;*.gif,默認(rèn)為null(所有文件類型)
  'fileDesc':'不超過2M的圖片 (*.gif;*.jpg;*.png)',
  'sizeLimit': 2048000, //允許上傳的文件大小(kb) 此為2M
  'onSelectOnce': function(event,data) { //在單文件或多文件上傳時(shí)，選擇文件時(shí)觸發(fā)
  //event 事件對象(the event object)
  //data 選擇的操作信息
  //data.filesSelected 選擇文件操作中選中的文件數(shù)量
  $('#status-message').text(data.filesSelected + ' 文件正在等待上傳…….'); 
  },
  'onComplete': function(event, queueID, fileObj, response, data) {//當(dāng)單個(gè)文件上傳完成后觸發(fā)
  //event:事件對象(the event object)
  //ID:該文件在文件隊(duì)列中的唯一表示
  //fileObj:選中文件的對象，他包含的屬性列表
  //response:服務(wù)器端返回的Response文本，我這里返回的是處理過的文件名稱
  //data：文件隊(duì)列詳細(xì)信息和文件上傳的一般數(shù)據(jù)

  alert("文件:" + fileObj.name + " 上傳成功！");
  //設(shè)置圖片名稱
  $("#applogo").attr("value",response);
  //設(shè)置輸入框的值
  $("#text_webApplogo").attr("value",fileObj.name);
  //設(shè)置圖片路徑
  $("#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);
  //圖片路徑設(shè)置完成后，顯示圖片
  $("#webApplogo_tab").css("display","block");
  },
  'onError': function(event, queueID, fileObj) {//當(dāng)單個(gè)文件上傳出錯(cuò)時(shí)觸發(fā)
  alert("文件:" + fileObj.name + " 上傳失??！");
  },
  'buttonImg':'Images/bn_04.gif',//瀏覽按鈕的圖片路徑
  'width':60,//瀏覽按鈕的寬和高
  'height':24
  ,'queueID':'QID_webApplogo'//頁面上作為文件上傳隊(duì)列的元素的ID
 });

3、服務(wù)器端處理文件上傳

/// <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;//圖片名稱
 //提供一個(gè)回調(diào)方法,用于確定Image對象在執(zhí)行生成縮略圖操作時(shí)何時(shí)提前取消執(zhí)行
 //如果此方法確定 GetThumbnailImage 方法應(yīng)提前停止執(zhí)行，則返回 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)
  {
  //是否有目錄，如沒有就創(chuàng)建
  if (!Directory.Exists(uploadpath))
  {
   Directory.CreateDirectory(uploadpath);
  }
  //客戶端文件完全名稱
  string filename = UploadImage.FileName;
  string extname = filename.Substring(filename.LastIndexOf(".") + 1);
  //為不重復(fù)，設(shè)置文件名
  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;//流文件，準(zhǔn)備讀取上載文件的內(nèi)容
  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、效果如下