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

更新时间:2023-04-06 19:33:00 阅读：评论：0

本文实例讲述了php+html5使用formdata对象提交表单及上传图片的方法。分享给大家供大家参考。具体分析如下：

formdata 对象，可以把form中所有表单元素的name与value组成一个querystring，提交到后台。在使用ajax提交时，使用formdata对象可以减少拼接querystring的工作量。

使用formdata对象

1.创建一个formdata空对象，然后使用append方法添加key/value

复制代码代码如下: var formdata = new formdata();

formdata.append(‘name’,’fdipzone’);

formdata.append(‘gender’,’male’);

2.取得form对象，钓鱼技巧作为参数传入到formdata对象

复制代码代码如下: <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提交表单及上传文件：

复制代码代码如下: <!doctype html public “-//w3c//dtd html 4.0 transitional//en”>

<html>

<head>

<meta http-equiv=”content-type” content=”text/html; chart=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: ‘rver.php’,

type: ‘post’,

data: data,

datatype: ‘json’,

cache: fal,

processdata: fal,

contenttype: fal

}).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);

}el{

alert(‘提交失敗’);

}

});

return fal;

}

–>

</李少红版红楼梦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>

rver.php如下：

复制代码代码如下: <?php

$name = ist($_post[‘name’])? $_post[‘name’] : ”;

$gender = ist($_post[‘gender’])? $_post[‘gender’] : ”;

$filename = limttime().substr($_files[‘photo’][‘name’], strrpos($_files[‘photo’][‘name’],’.’));

$respon = array();

if(move_uploaded_file($_files[‘photo’][‘tmp_name’], $filename)){

$respon[&#电工学习心得8216;issuccess’] = true;

$respon[‘name免费学习网’] = $name;

$respon[‘gender’] = $gender;

$respon[‘photo’] = $filename;

}el{

$respon[‘issuccess’] = fal;

}

echo json_encode($respon);

?>