本文为大家分享了ajax异步上传文件或图片功能的具体代码，供大家参考，具体内容如下
|
1
2
3
4
5
6
7
8
9
|
//html代码
<
form
enctype
=
"multipart/form-data"
id
=
"upForm"
>
<
input
type
=
"file"
name
=
"file"
><
br
><
br
>
<
input
type
=
"button"
value
=
"提交"
>
</
form
>
<
div
class
=
"picDis"
>
<
img
src
=
""
alt
=
""
>
</
div
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//js代码
(
':button'
).click(
function
(event) {
//formdata储存异步上传数据
var
formData =
new
FormData($(
'form'
)[0]);
formData.append(
'file'
,$(
':file'
)[0].files[0]);
//坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了
$.ajax({
url:
'formtest.php'
,
type:
'POST'
,
data: formData,
//这两个设置项必填
contentType:
false
,
processData:
false
,
success:
function
(data){
console.log(data)
var
srcPath = data;
console.log();
//注意这里的路径要根据自己的储存文件的路径设置
$(
'.picDis img'
).attr(
'src'
,
'..'
+srcPath);
}
})
});
|
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
|
<?php
$upFile
=
$_FILES
[
'file'
];
/**
* 创建文件夹函数,用于创建保存文件的文件夹
* @param str $dirPath 文件夹名称
* @return str $dirPath 文件夹名称
*/
function
creaDir(
$dirPath
){
$curPath
= dirname(
__FILE__
);
$path
=
$curPath
.
'\\'
.
$dirPath
;
if
(
is_dir
(
$path
) ||
mkdir
(
$path
,0777,true)) {
return
$dirPath
;
}
}
//判断文件是否为空或者出错
if
(
$upFile
[
'error'
]==0 && !
empty
(
$upFile
)) {
$dirpath
= creaDir(
'upload'
);
$filename
=
$_FILES
[
'file'
][
'name'
];
$queryPath
=
'./'
.
$dirpath
.
'/'
.
$filename
;
//move_uploaded_file将浏览器缓存file转移到服务器文件夹
if
(move_uploaded_file(
$_FILES
[
'file'
][
'tmp_name'
],
$queryPath
)){
echo
$queryPath
;
}
}
?>
|
点击上传图片并发送后, 可以看到页面上显示出图片, 查看本地文件夹可以看到文件也已储存到服务器.
在客户端实现异步上传的关键在于FormData,关于这部分这里有详细介绍: FormData()
以上就是本文的全部内容