FormData配和jQuery Ajax上载文件:
参考文档:
1. Style样式文件 : 可忽略,我是为了看起来顺眼。
<style type="text/css">
/*样式文件,[可选]*/
*{padding: 0; margin: 0; list-style: none; text-decoration: none}
#area{margin: 0 auto; border: solid 1px #000; width: 360px; padding: 12px; min-height: 140px; margin-top: 14%;}
#area [type="button"]{padding: 4px 8px; float: right; cursor: pointer;}
#area p{padding: 4px 0;}
</style>
2. Html表单代码 :
<div id="area">
<form name="form1" id="form1" >
<p>Name: <input type="text" name="name" value="达尔文" /></p>
<p>Gender: <input type="radio" name="gender" value="1" checked /> male
<input type="radio" name="gender" value="2" /> female
</p>
<p>stu-number: <input type="text" name="sumber" value="007" /> </p>
<p>photo: <input type="file" name="photo" id="photo" /></p>
<p><input type="button" value="submit" onclick="fsubmit()"/></p>
</form>
<div id="result"></div>
</div>
3. jQuery代码:
<script src="../jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
/* 1.记得引入jQuery文件;
* 2.另外一件事是: 如果jQuery版本过低,比如我的1.3 。。。可能会上传发生失败的。 */
function fsubmit(){
var form = document.getElementById("form1");
var fd = new FormData(form);
$.ajax({
type:"POST",
url:"test2server.php",
data: fd,
processData: false,
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']+
'<img src="'+json['photo']+'" width="100">';
$('#result').html(result);
},
async:true
});
return false;
}
</script>
*. Php代码的处理 :
<!-- server.php -->
<?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);
?>
效 果 :
发布时间:Oct 17 2017,(14:09 PM);
修改:2018-5-1 Pm5:11;