基于Jquery插件Uploadify實現(xiàn)實時顯示進度條上傳圖片
先了解了解Uploadify,具體內(nèi)容如下
Uploadify是一個簡單易用的多文件上傳方案。作為一個Jquery插件,Uploadify使用簡單,并具有高度的定制性。
Uploadify特性:
Uploadify簡單說來,是基于Jquery的一款文件上傳插件。它的功能特色總結如下:
1)、支持單文件或多文件上傳,可控制并發(fā)上傳的文件數(shù)
2)、在服務器端支持各種語言與之配合使用,諸如PHP,.NET,Java……
3)、通過參數(shù)可配置上傳文件類型及大小限制
4)、通過參數(shù)可配置是否選擇文件后自動上傳
5)、易于擴展,可控制每一步驟的回調(diào)函數(shù)(onSelect, onCancel……)
6)、通過接口參數(shù)和CSS控制外觀
7)、提供上傳進度的事件回調(diào),實時顯示上傳進度
8)、開始之前要先下載插件安裝包到本地并引用,詳細實現(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圖標:</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) { //在單文件或多文件上傳時,選擇文件時觸發(fā) //event 事件對象(the event object) //data 選擇的操作信息 //data.filesSelected 選擇文件操作中選中的文件數(shù)量 $('#status-message').text(data.filesSelected + ' 文件正在等待上傳…….'); }, 'onComplete': function(event, queueID, fileObj, response, data) {//當單個文件上傳完成后觸發(fā) //event:事件對象(the event object) //ID:該文件在文件隊列中的唯一表示 //fileObj:選中文件的對象,他包含的屬性列表 //response:服務器端返回的Response文本,我這里返回的是處理過的文件名稱 //data:文件隊列詳細信息和文件上傳的一般數(shù)據(jù) 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) {//當單個文件上傳出錯時觸發(fā) 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;//圖片名稱 //提供一個回調(diào)方法,用于確定Image對象在執(zhí)行生成縮略圖操作時何時提前取消執(zhí)行 //如果此方法確定 GetThumbnailImage 方法應提前停止執(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); //為不重復,設置文件名 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;//流文件,準備讀取上載文件的內(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、效果如下
更多精彩內(nèi)容,請點擊《jQuery上傳操作匯總》,進行深入學習和研究。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助。
相關文章
jquery mobile界面數(shù)據(jù)刷新的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query mobile界面數(shù)據(jù)刷新的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05jquery mobile頁面跳轉后樣式丟失js失效的解決方法
用ajax跳轉的時候,目標頁的css以及js都失效,這是由于page之外的代碼都不會加載,所以導致在page外的js和css都失效,解決方法如下2014-09-09jquery pagination插件實現(xiàn)無刷新分頁代碼
首先,我們要準備的文件有jquery.js,jquery.pagination.js,pagination.css,還有一個就是經(jīng)常用的table布局的css文件。這些文件都會在后面的文件中包含。2009-10-10判斷jQuery是否加載完成,沒完成繼續(xù)判斷的解決方法
下面小編就為大家分享一篇判斷jQuery是否加載完成,如果沒完成繼續(xù)判斷的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12