jQuery.uploadify文件上傳組件實例講解
一、jquery.uploadify簡介javascript
在ASP.NET中上傳的控件有不少，好比.NET自帶的FileUpload，以及SWFUpload，Uploadify等等，尤爲後面兩個控件的用戶體驗比較好，無刷新，帶上傳進度等等。在最近的短信平臺開發中，使用Uploadify進行文件上傳。css
Uploadify官網地址是：http://www.uploadify.com/ 可知足項目開發需求。html
下載地址：http://www.uploadify.com/wp-content/uploads/files/uploadify.zip 版本信息以下：java
解壓以後，目錄結構以下（不在詳細解釋）：jquery
二、使用流程json
下載的程序是PHP示例，因爲項目使用的是asp.net mvc，使用uploadify可分如下步驟：服務器
•（1）加入uploadify js類庫（把uploadify相關js類庫引用到項目的相關位置，好比放到scripts目錄）mvc
•（2）對uploadify二次進行封裝，知足項目調用app
•（3）編寫文件上傳處理方法框架
•（4）頁面引用相關類庫並編寫上傳腳本
2.1 對uploadify二次進行封裝
針對uploadify調用進行js類庫封裝，知足項目使用：
|
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
|
//轉換成key=value&key=value格式
tx.toParam =
function
(dto) {
return
jQuery.param(dto);
}
//設置上傳文件
tx.uploadify =
function
(divId, options, action) {
if
(options == undefined && action == undefined) {
$(
'#'
+ divId).uploadify(
"upload"
);
return
;
}
if
(options == undefined) {
abp.message.warn(
"請輸入參數配置"
);
return
;
}
var
fileexts = options.fileexts;
if
(fileexts == undefined || fileexts.length <= 0) {
abp.message.warn(
"要選擇文件的擴展名不能爲空"
);
return
;
}
$(
'#'
+ divId).uploadify({
uploader:
'/files/upload?r='
+ Math.random()
+
"&fileexts="
+ encodeURIComponent(fileexts)
+
"&"
+ (options !== undefined ? tx.toParam(options.params) :
""
),
// 服務器端處理地址
swf:
'/Scripts/uploadify/uploadify.swf'
,
// 上傳使用的 Flash
width: 60,
// 按鈕的寬度
height: 23,
// 按鈕的高度
buttonText:
"選擇文件"
,
// 按鈕上的文字
buttonCursor:
'hand'
,
// 按鈕的鼠標圖標
fileObjName:
'Filedata'
,
// 上傳參數名稱
fileTypeExts: fileexts,
// 擴展名
fileTypeDesc:
"請選擇文件"
,
// 文件說明
fileDesc:
'不超過200M的'
,
sizeLimit: 204800000,
//容許上傳的文件大小(kb) 此爲2M
auto:
false
,
// 選擇以後，自動開始上傳
multi:
true
,
// 是否支持同時上傳多個文件
queueSizeLimit: 1,
// 容許多文件上傳的時候，同時上傳文件的個數
onSelectOnce:
function
(event, data) {
//在單文件或多文件上傳時，選擇文件時觸發
//event 事件對象(the event object)
//data 選擇的操做信息
//data.filesSelected 選擇文件操做中選中的文件數量
},
onUploadStart:
function
(file) {
//file:將要上載的文件對象
ShowBusy();
},
onUploadComplete:
function
(file) {
//file:上傳或返回一個錯誤的文件對象。
},
onUploadSuccess:
function
(file, data, response) {
//file:成功上傳的文件對象
//data:服務器端腳本返回的數據（任何由文件響應的任何東西）
//response:服務器返回的響應是否真的成功或錯誤，若是沒有響應。若是返回false，這successtimeout期權到期後的反應真是假設。
if
(action !== undefined) {
action(JSON.parse(data));
}
ClearBusy();
},
onUploadError:
function
(file, errorCode, errorMsg, errorString) {
//file:上傳的文件對象
//errorCode:返回的錯誤代碼
//errorMsg:返回的錯誤消息
//errorString:包含錯誤的全部細節的可讀的錯誤信息
if
(action !== undefined) {
if
(action !== undefined) {
action({
result: errorCode,
message: errorMsg,
filename:
""
,
fileext:
""
});
}
}
ClearBusy();
}
});
}
|
2.2 文件上傳處理
使用MVC特性，要登陸以後才能進行文件上傳：
|
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
96
97
98
99
100
101
|
using System;
using System.IO;
using System.Security.Principal;
using System.Web;
using System.Web.Mvc;
using System.Web.Security;
namespace TxSms.Web.Controllers
{
/// <summary>
/// 文件上傳管理
/// </summary>
[Authorize]
public class FilesController : TxSmsControllerBase
{
private static string jsonResult =
"{0}\"result\":{1},\"message\":\"{2}\",\"filename\":\"{3}\",\"fileext\":\"{4}\"{5}"
;
/// <summary>
/// 文件上傳頁面
/// </summary>
/// <returns></returns>
[Authorize]
public ActionResult Index()
{
return
View();
}
/// <summary>
/// 上傳文件
/// </summary>
/// <param name="filedata"></param>
/// <returns></returns>
[Authorize]
public ActionResult Upload(HttpPostedFileBase filedata)
{
// 若是沒有上傳文件
if
(filedata ==
null
|| filedata.FileName.IsNullOrEmpty() || filedata.ContentLength == 0)
{
return
new
JsonStringResult(string.Format(jsonResult,
"{"
, -1,
""
,
""
,
""
,
"}"
));
}
string parmPath = Request.QueryString[
"path"
];
string parmGetzipfile = Request.QueryString[
"getzipfile"
];
if
(parmGetzipfile.IsNullOrEmpty())
{
parmGetzipfile =
"0"
;
}
// 保存到 ~/uploads 文件夾中，名稱不變
string time = DateTime.Now.ToString(
"yyyyMMddHHmmssfff"
);
string fileext = Path.GetExtension(filedata.FileName);
string filename = time + fileext;
string virtualPath = parmPath.IsNullOrEmpty()
? $
"~/uploads/"
: $
"~/uploads/{parmPath}/"
;
string actualPath = Server.MapPath(virtualPath);
if
(!Directory.Exists(actualPath))
{
Directory.CreateDirectory(Server.MapPath(virtualPath));
}
// 文件系統不能使用虛擬路徑
var
destFile = virtualPath + filename;
string path = Server.MapPath(destFile);
filedata.SaveAs(path);
bool iszip = fileext !=
null
&& (fileext.Equals(
".zip"
, StringComparison.OrdinalIgnoreCase) && parmGetzipfile.Equals(
"1"
));
if
(iszip)
{
var
virtualPathZip = virtualPath + time +
"/"
;
string actualPathZip = Server.MapPath(virtualPathZip);
if
(!Directory.Exists(actualPathZip))
{
Directory.CreateDirectory(actualPathZip);
}
destFile = fileext =
""
;
//第一步驟，解壓
TxSmsZipHelper.UnZipFile(path, actualPathZip);
//第二步驟，獲取excel文件，若是沒有獲取到，則拋出異常
//得到目錄信息
var
dir =
new
DirectoryInfo(actualPathZip);
//得到目錄文件列表
var
files = dir.GetFiles();
foreach (FileInfo fileName
in
files)
{
//var ext = Path.GetExtension(fileName.Name).ToLower();
//if (ext == ".xls" || ext == ".xlsx")
//{
// destFile = Path.Combine(fileName.DirectoryName, fileName.Name);
// break;
//}
destFile = virtualPathZip + fileName.Name;
fileext = Path.GetExtension(fileName.Name);
break
;
}
}
return
new
JsonStringResult(string.Format(jsonResult,
"{"
, 0,
"上傳成功"
, destFile, fileext.ToLower(),
"}"
));
}
public class JsonStringResult : ContentResult
{
public JsonStringResult(string json)
{
Content = json;
ContentType =
"application/json"
;
}
}
}
}
|
文件上傳路徑：/files/upload
2.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
|
<!DOCTYPE html>
<html>
<head>
<meta name=
"viewport"
content=
"width=device-width"
/>
<title>Index</title>
<link href=
"/Content/themes/base/uploadify/uploadify.css"
rel=
"stylesheet"
/>
<script src=
"/Scripts/jquery-2.1.4.min.js"
></script>
<script src=
"/Scripts/uploadify/jquery.uploadify.min.js"
></script>
<script type=
"text/javascript"
>
$(
function
() {
var
ASPSESSID =
'3iupfg2udk4m5hyzfj5ydlso'
;
var
auth =
''
;
//初始化
tx.uploadify(
'uploadify'
,
{
//參數配置
fileexts:
"*.jpg;*.png;*.zip"
,
//要選擇文件的擴展名，多個用;分割
//formData: { ASPSESSID: ASPSESSID, AUTHID: auth },
params: {
//參數
path:
'files'
,
//上傳路徑，容許爲空
getzipfile: 1
//解壓zip文件，並獲取文件 0：不解壓獲取，1：解壓獲取
}
}
,
function
(data) {
//回調函數
//data.result：0 表示成功，其餘表示錯誤
//data.message：信息
//data.filename：文件名稱
//data.fileext：文件擴展
console.log(data.result);
console.log(data.message);
console.log(data.filename);
console.log(data.fileext);
});
$(
"#btnUpload"
).click(
function
() {
tx.uploadify(
'uploadify'
);
//開始上傳
});
});
</script>
</head>
<body>
<div style=
"margin: 40px;"
>
<div id=
"uploadify"
></div>
<button id=
"btnUpload"
>開始上傳</button>
</div>
</body>
</html>
|
容許程序，界面以下：
選擇文件—>開始上傳：
ok，到此已經完成。
三、http 302解決方案
很懷疑二八原則，很快就出現了。同事用firefox進行測試，遇到以下提示：
查找大量資料，發下是Upload方法認證的問題，去掉[Authorize]屬性標籤便可，代碼修改以下：
|
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
96
97
98
99
100
101
102
103
104
|
using System;
using System.IO;
using System.Web;
using System.Web.Mvc;
namespace TxSms.Web.Controllers
{
/// <summary>
/// 文件上傳管理
/// </summary>
//[Authorize]
public class FilesController : TxSmsControllerBase
{
private static string jsonResult =
"{0}\"result\":{1},\"message\":\"{2}\",\"filename\":\"{3}\",\"fileext\":\"{4}\"{5}"
;
/// <summary>
/// 文件上傳頁面
/// </summary>
/// <returns></returns>
[Authorize]
public ActionResult Index()
{
return
View();
}
/// <summary>
/// 上傳文件
/// </summary>
/// <param name="filedata"></param>
/// <returns></returns>
//[Authorize]
public ActionResult Upload(HttpPostedFileBase filedata)
{
//加入認證信息
if
(
this
.LoginUser ==
null
)
{
return
new
JsonStringResult(string.Format(jsonResult,
"{"
, -1,
"抱歉，未登陸，不容許上傳"
,
""
,
""
,
"}"
));
}
// 若是沒有上傳文件
if
(filedata ==
null
|| filedata.FileName.IsNullOrEmpty() || filedata.ContentLength == 0)
{
return
new
JsonStringResult(string.Format(jsonResult,
"{"
, -2,
"無上傳文件"
,
""
,
""
,
"}"
));
}
string parmPath = Request.QueryString[
"path"
];
string parmGetzipfile = Request.QueryString[
"getzipfile"
];
if
(parmGetzipfile.IsNullOrEmpty())
{
parmGetzipfile =
"0"
;
}
// 保存到 ~/uploads 文件夾中，名稱不變
string time = DateTime.Now.ToString(
"yyyyMMddHHmmssfff"
);
string fileext = Path.GetExtension(filedata.FileName);
string filename = time + fileext;
string virtualPath = parmPath.IsNullOrEmpty()
? $
"~/uploads/"
: $
"~/uploads/{parmPath}/"
;
string actualPath = Server.MapPath(virtualPath);
if
(!Directory.Exists(actualPath))
{
Directory.CreateDirectory(Server.MapPath(virtualPath));
}
// 文件系統不能使用虛擬路徑
var
destFile = virtualPath + filename;
string path = Server.MapPath(destFile);
filedata.SaveAs(path);
bool iszip = fileext !=
null
&& (fileext.Equals(
".zip"
, StringComparison.OrdinalIgnoreCase) && parmGetzipfile.Equals(
"1"
));
if
(iszip)
{
var
virtualPathZip = virtualPath + time +
"/"
;
string actualPathZip = Server.MapPath(virtualPathZip);
if
(!Directory.Exists(actualPathZip))
{
Directory.CreateDirectory(actualPathZip);
}
destFile = fileext =
""
;
//第一步驟，解壓
TxSmsZipHelper.UnZipFile(path, actualPathZip);
//第二步驟，獲取excel文件，若是沒有獲取到，則拋出異常
//得到目錄信息
var
dir =
new
DirectoryInfo(actualPathZip);
//得到目錄文件列表
var
files = dir.GetFiles();
foreach (FileInfo fileName
in
files)
{
//var ext = Path.GetExtension(fileName.Name).ToLower();
//if (ext == ".xls" || ext == ".xlsx")
//{
// destFile = Path.Combine(fileName.DirectoryName, fileName.Name);
// break;
//}
destFile = virtualPathZip + fileName.Name;
fileext = Path.GetExtension(fileName.Name);
break
;
}
}
return
new
JsonStringResult(string.Format(jsonResult,
"{"
, 0,
"上傳成功"
, destFile, fileext.ToLower(),
"}"
));
}
public class JsonStringResult : ContentResult
{
public JsonStringResult(string json)
{
Content = json;
ContentType =
"application/json"
;
}
}
}
}
|
再次用firefox測試以下：
四、注意事項
一、封裝的js類庫適合單文件上傳
二、upload裏面的登陸認證是經過判斷當前帳號信息是否爲null
三、本項目使用的abp框架，有興趣的能夠去了解下：http://www.aspnetboilerplate.com/
以上所述是小編給你們介紹的jQuery.uploadify文件上傳組件實例講解，但願對你們有所幫助，若是你們有任何疑問請給我留言，小編會及時回覆你們的。在此也很是感謝你們對腳本之家網站的支持！
相關文章
- 1. jQuery.uploadify-----文件上傳帶進度條，支持多文件上傳的插件
- 2. jquery.uploadify上傳文件配置詳解(asp.net mvc)
- 3. libcurl上傳文件實例
- 4. 文件上傳實例
- 5. PHP文件上傳實例詳解！！！
- 6. cos組件實現文件上傳
- 7. 文件上傳組件swfupload
- 8. Bootstrap文件上傳組件
- 9. vue上傳文件組件
- 10. OSS上傳文件 組件
- 更多相關文章...
- • PHP 文件上傳 - PHP教程
- • *.hbm.xml映射文件詳解 - Hibernate教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
歡迎關注本站公眾號,獲取更多信息
相關文章