<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
form label,form input{
margin-top:20px;
}
</style>
</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>stu-number：<input type="text" name="number" /></p>
<p>photo:<input type="file" name="photo" id="photo"></p>
<p><input type="button" name="b1" value="submit" /></p>
</form>
<!--显示-->
<div id="result"></div>
</body>
<script type="text/javascript">
$("#form1 :button").click(function(){
var data = new FormData($('#form1')[0]);
$.ajax({
url: "server.php",
type: "POST",
data: data,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false,
success: function(response, status, xhr) {
console.log(xhr);
var json = $.parseJSON(response);
var result = '';
result += "个人信息：<br/>name:" + json['name'] + "<br/>gender:" + json['gender'] + "<br/>number:" + json['number'];
result += '<br/>头像：<img src="' + json['photo'] + '" height="100" style="border-radius: 50%;" />';
$('#result').html(result);
}
});
})
</script>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
form label,form input{
margin-top:20px;
}
</style>
</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>stu-number：<input type="text" name="number" /></p>
<p>photo:<input type="file" name="photo" id="photo"></p>
<p><input type="button" name="b1" value="submit" /></p>
</form>
<!--显示-->
<div id="result"></div>
</body>
<script type="text/javascript">
$("#form1 :button").click(function(){
var data = new FormData($('#form1')[0]);
$.ajax({
url: "server.php",
type: "POST",
data: data,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false,
success: function(response, status, xhr) {
console.log(xhr);
var json = $.parseJSON(response);
var result = '';
result += "个人信息：<br/>name:" + json['name'] + "<br/>gender:" + json['gender'] + "<br/>number:" + json['number'];
result += '<br/>头像：<img src="' + json['photo'] + '" height="100" style="border-radius: 50%;" />';
$('#result').html(result);
}
});
})
</script>
</html>
<?php
$name = isset($_POST['name'])? $_POST['name'] : '';
$gender = isset($_POST['gender'])? $_POST['gender'] : '';
$number = isset($_POST['number'])? $_POST['number'] : '';
$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['number'] = $number;
$response['photo'] = $filename;
}else{
$response['isSuccess'] = false;
}
echo json_encode($response);
?>
2006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
