<form>标签添加enctype="multipart/form-data"属性。
$("form").serialize()和nedw 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,上传文件不需要缓存。
易错点:无论怎样传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了
代码:
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>
<?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;
}
}
}
}
?>