基於Jquery插件Uploadify實現實時顯示進度條上傳圖片
阿新 • • 發佈:2017-08-18
準備 深入學習 pla 回調 true bar put and 分割
網址:http://www.jb51.net/article/83811.htm
這篇文章主要介紹了基於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代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
< div id = "webApplogo_file" style = "display: block; width: 800px; " >
< 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代碼(關鍵部分)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
$( "#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、服務器端處理文件上傳
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
/// <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實現實時顯示進度條上傳圖片