基于Jquery插件Uploadify實現實時顯示進度條上傳圖片_

1、基于Jquery插件Uploadify實現實時顯示進度條上傳圖片_ 這篇文章主要介紹了基于Jquery插件Uploadify實現實時顯示進度條上傳圖片的相關資料，感愛好的小伙伴們可以參考一下 先了解了解Uploadify，具體內容如下 Uploadify是一個簡潔易用的多文件上傳方案。作為一個Jquery插件，Uploadify用法簡潔，并具有高度的定制性。 Uploadify特性： Uploadify簡潔說來，是基于Jquery的一款文件上傳插件。它的功能特色總結如下： 1）、支持單文件或多文件上傳，可掌握并發(fā)上傳的文件數 2）、在服務器端支持各種語言與之配合用法，諸如PHP,.NET,Ja

2、va 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

3、class=black_blod14LOGO圖標：/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 lispan style=display: none; margin-left: 5px; padding-lef

4、t: 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

5、 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 va

6、lign=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: 16p

7、x; 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,

8、/上傳文件夾名 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) /在單文件或多文件上傳時，選擇文件時

9、觸發(fā) /event 大事對象(the event object) /data 選擇的操作信息 /data.filesSelected 選擇文件操作中選中的文件數量 $(#status-message).text(data.filesSelected + 文件正在等待上傳.); , onComplete: function(event, queueID, fileObj, response, data) /當單個文件上傳完成后觸發(fā) /event:大事對象(the event object) /ID:該文件在文件隊列中的唯一表示 /fileObj:選中文件的對象，他包含的屬性列表 /respons

10、e:服務器端返回的Response文本，我這里返回的是處理過的文件名稱 /data：文件隊列具體信息和文件上傳的一般數據 alert(文件: + fileO + 上傳勝利！); /設置圖片名稱 $(#applogo).attr(value,response); /設置輸入框的值 $(#text_webApplogo).attr(value,fileO); /設置圖片路徑 $(#img_64).attr(src,Imagelogo/64_+response); $(#img_48).attr(src,Imagelogo/48_+response); $(#img_32

11、).attr(src,Imagelogo/32_+response); $(#img_16).attr(src,Imagelogo/16_+response); /圖片路徑設置完成后，顯示圖片 $(#webApplogo_tab).css(display,block); , onError: function(event, queueID, fileObj) /當單個文件上傳出錯時觸發(fā) alert(文件: + fileO + 上傳失敗！); , buttonImg:Images/bn_04.gif,/掃瞄按鈕的圖片路徑 width:60,/掃瞄按鈕的寬和高 height:24 ,

12、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;/圖片

13、名稱 protected string fileName;/圖片名稱 /供應一個回調方法,用于確定Image對象在執(zhí)行生成縮略圖操作時何時提前取消執(zhí)行 /假如此方法確定 GetThumbnailImage 方法應提前停止執(zhí)行，則返回 true；否則返回 false System.Drawing.Image.GetThumbnailImageAbort callb = null; public void ProcessRequest(HttpContext context) context.Response.ContentType = text/plain; HttpPostedFile Upl

14、oadImage = context.Request.FilesFileData; /物理路徑 string uploadpath = HttpContext.Current.Server.MapPath(context.Requestfolder + ); if (UploadImage != null) /是否有名目，如沒有就創(chuàng)建 if (!Directory.Exists(uploadpath) Directory.CreateDirectory(uploadpath); /客戶端文件完全名稱 string filename = UploadImage.FileName; string

15、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.Subst

16、ring(imagePath.LastIndexOf(.) + 1); /取得圖片名稱 imageName = imagePath.Substring(imagePath.LastIndexOf() + 1); Stream imgStream = UploadImage.InputStream;/流文件，預備讀取上載文件的內容 int imgLen = UploadImage.ContentLength;/上載文件大小 /建立虛擬路徑 mPath = HttpContext.Current.Server.MapPath(context.Requestfolder); /保存到虛擬路徑 Upl

17、oadImage.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(

18、context.Requestfolder) + 64_ + fileName); /釋放image64對象的資源 image64.Dispose(); /生成縮略圖 image48 = image.GetThumbnailImage(48, 48, callb, new System.IntPtr(); image48.Save(HttpContext.Current.Server.MapPath(context.Requestfolder) + 48_ + fileName); image48.Dispose(); /生成縮略圖 image32 = image.GetThumbnailImage(32, 32, callb, new System.IntPtr(); image32.Save(HttpContext.Current.Server.MapPath(context.Requestfolder) + 32_ + fi