網址：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上傳操作匯總》，進行深入學習和研究。
以上就是本文的全部內容，希望對大家的學習有所幫助。