頂部導航開始 -->

用ajax提交帶有圖片的form表單

做一些用戶相關信息表單的是時候,有時候會需要用戶上傳圖片,如果是普通的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


自學php博客
請先登陸后發表評論
  • 最新評論
  • 總共1條評論
自學php博客

哲涵:還不錯!

2016-09-19 13:16:49 回復

  • ? 2014-2016 zixuephp.cn 版權所有
  • ICP證:皖ICP備16012107號
  • 聯系郵箱:[email protected]
  • 交流請加微信:weibobf2899 或掃下方二維碼
双大床红利扑克1手APP