本文介绍了一个使用Ajax实现的文件上传功能，包括前端进度显示及后端处理逻辑。演示了如何利用jQuery简化Ajax请求，并通过PHP进行文件验证和保存。
最近项目中要做一个带进度条的上传文件的功能,学习了Ajax,使用起来比较方便,将几个方法实现就行。
前端引入文件
|
|
<
link
rel
=
"stylesheet"
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
>
|
Ajax进度条异步处理
|
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
|
<script type=
"text/javascript"
>
$(
function
() {
$(
"#myupload"
).ajaxForm({
dataType:
'json'
,
beforeSend:
function
(){
$(
".progress"
).show();
},
uploadProgress:
function
(event,position,total,percentComplete){
var
percentVal = percentComplete +
'%'
;
$(
".progress-bar"
).width(percentComplete +
'%'
);
$(
".progress-bar"
).html(percentVal);
$(
".sr-only"
).html(percentComplete +
'%'
);
},
success:
function
(data){
$(
".progress"
).hide();
if
(data.error ==
"empty_name"
){
alert(
"文件上传非法,上传失败!"
);
exit();
};
if
(data.error ==
"large"
){
alert(
"图片上传不能大于2M,上传失败!"
);
exit();
};
/*alert(data.error);*/
if
(data.error ==
"format"
){
alert(
"图片格式错误,上传失败"
);
//alert(data.type);
exit();
};
//alert("上传成功!");
//files.html("<b>"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>删除</span>");
$(
".files"
).html(
"文件名: "
+data.name+
"<span class='delimg' rel='"
+data.pic+
"'> del </span>大小："
+data.size);
$(
".showimg"
).html(
"<img src='"
+img+
"'>"
);
alert(
"上传成功!"
);
},
error:
function
(){
alert(
"图片上传失败"
);
}
});
$(
".progress"
).hide();
});
</script>
|
前端上传HTML
<
div
class
=
"uk-container uk-container-center"
>
<
div
class
=
"pk-system-messages"
></
div
>
<
h1
class
=
"uk-h2 uk-text-center"
style
=
"margin-top:-100px;"
>文件上传</
h1
>
<
div
class
=
"pk-system-messages"
></
div
>
<
div
class
=
"container-main"
>
<
h1
>Ajax Image Uploader</
h1
>
<
p
>A simple tutorial to explain image uploading using jquery ajax and php</
p
>
<
form
id
=
'myupload'
action
=
'new_upload.php'
method
=
'post'
enctype
=
'multipart/form-data'
>
<
label
for
=
"file"
>Filename:</
label
>
<
input
type
=
"file"
name
=
"mypic"
id
=
"file"
><
br
>
<
input
type
=
"submit"
name
=
"upload"
class
=
"btn btn-success"
value
=
"upload"
>
</
form
>
<
div
class
=
"progress"
>
<
div
class
=
"progress-bar progress-bar-success progress-bar-striped"
role
=
"progressbar"
aria-valuenow
=
"45"
aria-valuemin
=
"0"
aria-valuemax
=
"100"
style
=
"width: 0%"
>
<
span
class
=
"sr-only"
>0% Complete</
span
>
</
div
>
</
div
>
<
div
class
=
"files"
></
div
>
<
div
class
=
"showimg"
></
div
>
</
div
>
</
div
>
|
PHP文件上传类
|
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
105
106
107
108
109
110
111
112
113
|
<?php
class
upload{
protected
$file_path
=
"files"
;
//当前files存储文件夹
#
protected
$file_size
= 1024000;
protected
$file_size
= 5120000;
//5M 用户上传
//检测文件是否为空
public
function
check_file(
$get_file
)
{
if
(
empty
(
$get_file
))
{
$type
=
"check_file"
;
$arr
=
array
(
'error'
=>
'empty_name'
,
'type'
=>
$type
);
echo
json_encode(
$arr
);
exit
();
}
return
true;
}
//检测文件类型
public
function
check_type(
$get_type
)
{
if
((
$get_type
==
".docx"
) || (
$get_type
==
".doc"
)) {
#
$types
=
$get_type
;
}
else
{
$type
=
"check_type"
;
$arr
=
array
(
'error'
=>
'format'
,
'type'
=>
$type
);
echo
json_encode(
$arr
);
exit
();
}
return
true;
}
//检测文件大小
public
function
check_size(
$get_file
)
{
if
(
$get_file
!=
""
) {
if
(
$get_file
>
$this
->file_size ) {
$arr
=
array
(
'error'
=>
'large'
);
echo
json_encode(
$arr
);
exit
();
}
}
else
{
return
false;
exit
();
}
return
true;
}
//文件保存
public
function
save_file(
$file_type
,
$file_tmp_name
)
{
$rand
= rand(1000, 9999);
$pics
=
date
(
"YmdHis"
) .
$rand
.
$file_type
;
$path
=
$this
->file_path.
"/"
.
$pics
;
$result
= move_uploaded_file(
$file_tmp_name
,
$path
);
if
(
$result
){
return
$pics
;
}
else
{
return
false;
exit
();
}
#
return
$pics
;
}
}
PHP文件上传处理
<?php
include
(
"upload.class.php"
);
$up_obj
=
new
upload();
$get_fileName
=
$_FILES
[
'mypic'
][
'name'
];
$get_fileSize
=
$_FILES
[
'mypic'
][
'size'
];
$get_TmpFiles
=
$_FILES
[
'mypic'
][
'tmp_name'
];
$get_fileType
=
strstr
(
$get_fileName
,
'.'
);
$check_result
=
$up_obj
->check_file(
$get_fileName
);
if
(
$check_result
){
//检查文件类型
$result_type
=
$up_obj
->check_type(
$get_fileType
);
//检查文件大小
if
(
$result_type
){
$result_size
=
$up_obj
->check_size(
$get_fileSize
);
if
(
$result_size
){
//文件上传保存
$pics
=
$up_obj
->save_file(
$get_fileType
,
$get_TmpFiles
);
$size
=
round
(
$get_fileSize
/1024,2);
$arr
=
array
(
'name'
=>
$get_fileName
,
'pic'
=>
$pics
,
'size'
=>
$size
,
'error'
=> 2
);
//检查文件上传状态
if
(
$pics
){
echo
json_encode(
$arr
);
/*
执行上传完成逻辑.....
*/
}
}
}
}
|
文件上传效果如图：
扫一扫
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
