加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 站长学院 > PHP教程 > 正文

php+html5使用FormData对象提交表单及上传图片的方法

发布时间:2020-12-13 02:24:27 所属栏目:PHP教程 来源:网络整理
导读:《:php+html5使用FormData对象提交表单及上传图片的方法》要点: 本文介绍了:php+html5使用FormData对象提交表单及上传图片的方法,希望对您有用。如果有疑问,可以联系我们。 本篇章节讲解php+html5使用FormData对象提交表单及上传图片的办法.分享给大

《:php+html5使用FormData对象提交表单及上传图片的方法》要点:
本文介绍了:php+html5使用FormData对象提交表单及上传图片的方法,希望对您有用。如果有疑问,可以联系我们。

本篇章节讲解php+html5使用FormData对象提交表单及上传图片的办法.分享给大家供大家参考.具体分析如下:PHP编程

FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台.在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量.PHP编程

使用FormData对象PHP编程

1.创建一个FormData空对象,然后使用append办法添加key/value
PHP编程

代码如下:
var formdata = new FormData();?
formdata.append('name','fdipzone');?
formdata.append('gender','male');

2.取得form对象,作为参数传入到FormData对象
PHP编程

代码如下:
<form name="form1" id="form1">?
<input type="text" name="name" value="fdipzone">?
<input type="text" name="gender" value="male">?
</form>

代码如下:
var form = document.getElementById('form1');?
var formdata = new FormData(form);

使用FormData提交表单及上传文件:PHP编程

代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">?
<html>?
?<head>?
? <meta http-equiv="content-type" content="text/html; charset=utf-8">?
? <title> FormData Demo </title>?
? <script src="/js/jquery-1.11.0.min.js"></script>?
? <script type="text/javascript">?
? <!--?
??? function fsubmit(){?
??????? var data = new FormData($('#form1')[0]);?
??????? $.ajax({?
??????????? url: 'server.php',?
??????????? type: 'POST',?
??????????? data: data,?
??????????? dataType: 'JSON',?
??????????? cache: false,?
??????????? processData: false,?
??????????? contentType: false?
??????? }).done(function(ret){?
??????????? if(ret['isSuccess']){?
??????????????? var result = '';?
??????????????? result += 'name=' + ret['name'] + '<br>';?
??????????????? result += 'gender=' + ret['gender'] + '<br>';?
??????????????? result += '<img src="' + ret['photo']? + '" width="100">';?
??????????????? $('#result').html(result);?
??????????? }else{?
??????????????? alert('提交失');?
??????????? }?
??????? });?
??????? return false;?
??? }?
? -->?
? </script>?
?</head>?
?<body>?
??? <form name="form1" id="form1">?
??????? <p>name:<input type="text" name="name" ></p>?
??????? <p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p>?
??????? <p>photo:<input type="file" name="photo" id="photo"></p>?
??????? <p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p>?
??? </form>?
??? <div id="result"></div>?
?</body>?
</html>

server.php如下:
PHP编程

代码如下:
<?php?
$name = isset($_POST['name'])? $_POST['name'] : '';?
$gender = isset($_POST['gender'])? $_POST['gender'] : '';?
$filename = time().substr($_FILES['photo']['name'],strrpos($_FILES['photo']['name'],'.'));?
$response = array();?
if(move_uploaded_file($_FILES['photo']['tmp_name'],$filename)){?
??? $response['isSuccess'] = true;?
??? $response['name'] = $name;?
??? $response['gender'] = $gender;?
??? $response['photo'] = $filename;?
}else{?
??? $response['isSuccess'] = false;?
}?
echo json_encode($response);?
?>

运行效果如下图所示:PHP编程

:php+html5使用FormData对象提交表单及上传图片的方法PHP编程

希望本文所述对大家的php程序设计有所赞助.PHP编程

欢迎参与《:php+html5使用FormData对象提交表单及上传图片的方法》讨论,分享您的想法,编程之家 52php.cn为您提供专业教程。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读