先解释一下：
<form>标签添加enctype="multipart/form-data"属性。
$("form").serialize()和 new FormData($('#uploadForm')[0])都是序列化表单，实现表单的异步提交，但是二者有区别
首先，前者，只能序列化表单中的数据 ，比如文本框等input select等的数据，但是对于文件，比如文件上传，无法实现，那么这时候，FormData就上场了，FormData 对象，可以把form中所有表单元素的name与value组成一个queryString，提交到后台。在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。
FormData对象，是可以使用一系列的键值对来模拟一个完整的表单
new FormData使用需要有一个注意点，
注意点一：
，对于jquery的要求是，好像是 版本1.8及其以上方可支持。
另外该对象不仅仅可以序列化文件，一样可以用作表单数据的序列化，（就是说包含了serialize()的功能）；
注意点二：(js中配置)
processData:
false
, contentType:
false
,缺少这二者的设置，将会出现 红色部分的错误提示，提交失败。（ajax传值的时候设置二者）
processData设置为false。因为data值是FormData对象，不需要对数据做处理。
cache设置为false，上传文件不需要缓存。
contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。
代码：
html页面还有ajax提交数据
<!doctype
html
>
<
html lang=
"en"
>
<
head
>
<
meta charset=
"UTF-8"
>
<
title
>
Document
</
title
>
</
head
>
<
body
>
<
form enctype=
"multipart/form-data"
>
<
input type=
"file"
name=
"file"
><
br
><
br
>
<
input type=
"button"
value=
"
提交
"
>
</
form
>
<
div class=
"picDis"
>
<
img src=
""
alt=
""
>//展示以上传图片
</
div
>
</
body
>
</
html
>
<
script src=
"../kao/jquery-1.9.1.min.js"
type=
"text/javascript"
></
script
>//引入jquery文件
<
script
>
$
(
'
input
[
type
=button]'
).
click
(
function
(){
var
formData
= new
FormData
(
$
(
'form'
)[
0
])
;//获取表单序列化后的
formData
.
append
(
'file'
,
$
(
':file'
)[
0
].
files
[
0
])
;
$
.
ajax
({
url
:
'./formtest.php'
,
type
:
'POST'
,
dataType
:
"json"
,
data
:
formData
,
//
这两个设置项必填
contentType
: false
,
processData
: false
,
success
:function
(data){
console
.
log
(data)
;
if
(data.
msg
!=
'
上传失败
'
){
//
注意这里的路径要根据自己的储存文件的路径设置
$
(
'.
picDis img
'
).
attr
(
'src'
,
'./'
+
data.
msg
)
;
}
else
{
alert
(data.
msg
)
;
}
}
})
})
</
script
>
处理数据页面（
formtest.php
）
<?php
include_once
'File.class.php'
;//引入类
$file
=
$_FILES
;//间数据
$obj
=
File
::
getObj
()
;//单例模式
$error
=
$obj
->
up
(
$file
[
'file'
])
;//上传
if
(
$error
!= false
){
$arr
=
[
'msg'
=>
$error
]
;
$arr1
=
json_encode
(
$arr
)
;
echo
$arr1
;
}
else
{
$arr
=
[
'msg'
=>
'
上传失败
'
]
;
$arr1
=
json_encode
(
$arr
)
;
echo
$arr1
;
}
File.class.php页面
<?php
header
(
"content-type:text/html;charset=utf-8"
)
;
//
接口
interface
up
{
public function
up
(
$myfile
)
;
public function
checkerror
(
$error
)
;
public function
checksize
(
$size
)
;
public function
checktype
(
$type
)
;
public static function
getObj
()
;
}
final class
File
implements
up{
public
$many
;
public
$arr
=array
(
"jpg"
,
"bmp"
,
"jpeg"
,
"png"
,
"gif"
)
;
public
$error
;
private static
$obj
;
private function
__construct
(){}
public static function
getObj
(){
if
(
self::
$obj
instanceof
self
){
return self::
$obj
;
}
else
{
self::
$obj
=new self
;
return self::
$obj
;
}
}
private function
__clone
(){}
function
up
(
$myfile
){
$this
->
many
=
1024
*
1024
*
2
;
//
验证错误级别
$res1
=
$this
->
checkerror
(
$myfile
[
'error'
])
;
//
文件大小
$res2
=
$this
->
checksize
(
$myfile
[
'size'
])
;
//
验证文件类型
$res3
=
$this
->
checktype
(
$myfile
[
'type'
])
;
//
判断
if
(
$res1
&&
$res2
&&
$res3
){
//
文件位置
//
文件名
$dir
=
date
(
"Y"
)
.
"/"
.
date
(
"m"
)
.
"/"
.
date
(
"d"
)
;
is_dir
(
$dir
)
or
mkdir
(
$dir
,
0777
,
true
)
;
//
图片名
$late
=
substr
(
$myfile
[
'name'
]
,
strrpos
(
$myfile
[
'name'
]
,
"."
))
;
$file_name
=
time
()
.
rand
(
10000
,
99999
)
.
$late
;
//
连接成路径
$path
=
$dir
.
"/"
.
$file_name
;
move_uploaded_file
(
$myfile
[
'tmp_name'
]
,
$path
)
;
return
$path
;
}
else
{
return false
;
}
}
//
验证错误级别
function
checkerror
(
$error
){
if
(
$error
==
0
){
return true
;
}
else
{
switch
(
$error
){
case
1
:
$this
->
error
=
"
上传文件超过
php.ini
中的设置
"
;
break
;
case
2
:
$this
->
error
=
"
上传大小超过表单中的设置
"
;
break
;
case
3
:
$this
->
error
=
"
只有部分文件被上传
"
;
break
;
case
4
:
$this
->
error
=
"
没有文件上传
"
;
break
;
}
return false
;
}
}
//
验证上传文件大小
function
checksize
(
$size
){
if
(
$size
<
$this
->
many
){
return true
;
}
else
{
$this
->
error
=
"
文件过大，大于
1M"
;
return false
;
}
}
//
验证类型
function
checktype
(
$type
){
if
(
!empty
(
$type
)){
$style
=
substr
(
$type
,
strpos
(
$type
,
'/'
)
+
1
)
;
if
(
in_array
(
$style
,
$this
->
arr
)){
return true
;
}
else
{
$this
->
error
=
"
文件类型不正确 不是
jpg,jpeg,bmp,png,gif"
;
return false
;
}
}
}
}
?>
687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
