用ajax提交带有图片的form表单

做一些用户相关信息表单的是时候,有时候会需要用户上传图片,如果是普通的form提交的话,问题非常容易解决,但如果公司想要更好的用户体验,不想让页面跳来跳去的,就需要用ajax来提交了。

做一些用户相关信息表单的是时候,有时候会需要用户上传图片,如果是普通的form提交的话,问题非常容易解决,但如果公司想要更好的用户体验,不想让页面跳来跳去的,就需要用ajax来提交了。

但是直接用ajax提交数据的话,是没办法把图片上传的,这里推荐使用uploadajax.js插件进行提交,既可以上传图片,同时可以提交form表单。

自学php博客

具体使用代码:

html代码:

自学php博客

ajax代码:

$('[name="sub"]').click(function(){

var name=$('[name="name"]').val();

var tel=$('[name="tel"]').val();

$.ajaxFileUpload({

 url:"{:U('Index/ajax')}",

 secureuri:false,

 fileElementId:'path',

 dataType:"json",

 type:'post',

 data:{name:name,tel:tel,structure:structure,area:area},

 success:function(data,status){

  alert(data[1]);

  if(data[0]){

   setTimeout(loca,1000);//自定义跳转方法loca

  }else{

   setTimeout(hide_div,1000);//自定义隐藏提示框方法hide_div

  }

},

 error: function (data, status){

  alert(status);

 }

});

});

php代码:

public function ajax(){

//=============================================获取用户提交的数据

$name=addslashes($_POST['name']);//用户姓名

$tel=addslashes($_POST['tel']);//用户联系电话

if(empty($name)||empty($tel)||empty($area)){

$res=array(false,'请填写信息!');

echo json_encode($res);

exit;

}

//处理用户上传的房型图,并获取用户上传的图片地址

$upFileName = $_FILES['path']['name'];

$upFileSize = $_FILES['path']['size'];

$upFileTmpNm = $_FILES['path']['tmp_name'];

$upFileType = $_FILES['path']['type'];

$upFileErr = $_FILES['path']['error'];

if($upFileSize>2*1024*1024){

$res=array(false,'文件必须小于2M');

}else{

$type=array('image/jpg','image/jpeg','image/pjpeg','');

if(in_array($upFileType,$type)){

$upload_name=time();

if($upFileType!=''){

$rs=move_uploaded_file($upFileTmpNm,'./Home/Upload/'.$upload_name.'.jpg');

}else{

$rs=false;

}

if($rs){

$path='http://localhost/baoming/Home/Upload/'.$upload_name.'.jpg';

}else{

$path='';

}

//=============================================获取用户提交的数据over

//用户报名时间

$time=date('Y-m-d H:i:s');

//=============================================连接数据库存放用户报名的数据

$model=M('custome');

$m_custome=M('customeAddress');

//根据手机号判断用户名是否已经报名过

$tmp=$model->where('mobilephone="'.$tel.'" and comechild="免费报名"')->find();

if($tmp){

$res=array(false,'您已经报过名了,感谢您的支持!');

}else{

//组织sql语句执行插入数据操作

//$arr=array('tid'=>2,'uname'=>$name,'mobilephone'=>$tel,'structure'=>$structure,'area'=>$area,'path'=>$path,'time'=>$time);

$arr=array('uname'=>$name,'mobilephone'=>$tel,'comefrom'=>'网站','comechild'=>'免费报名','img'=>$path,'createTime'=>$time);

$rs=$model->add($arr);

if($rs===false&&$flag===false){

$res=array(false,'报名失败!');

}else{

$res=array(true,'恭喜你报名成功!');

}

}

}else{

$res=array(false,'请上传jpg格式图片');

}

}

echo json_encode($res);

?>

下载地址:

http://pan.baidu.com/s/1pL91CMJ   密码:yhhv