<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function()
{
var fm=document.getElementsByTagName("form")[0]; fm.onsubmit=function()
{
//var username=document.getElementById("username").value;
// var password=document.getElementById("password").value;
// var email=document.getElementById("email").value;
//var fmdata="username="+username+"&password="+password+"&email="+email; var fmdata=new FormData(fm); var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if(xhr.readyState==4)
{
eval("var obj="+xhr.responseText); document.getElementById("scjg").innerHTML=obj.jg;
if(obj.name!=null){
document.getElementById("sctp").innerHTML='<img src=\"'+obj.name+'\" width="89" height="70" alt=""/>';}
} } //设置监听事件ajax.upload.onprogress
xhr.upload.onprogress=function(evt){
//感知附件上传情况，利用事件感知
//console.log(evt);
var loaded=evt.loaded;
var total=evt.total;
var per=Math.floor((loaded/total)*100)+"%";
document.getElementById("jdn").style.width=per;
document.getElementById("jdn").innerHTML=per;
}
xhr.open("POST","/1.php");
//使用formData不用设置表头
//xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(fmdata);
return false;
} }
</script>
<style>
#jdw{
margin:10px;
height:20px;
border:solid 1px #666;
width:200px;}
#jdn{height:20px;
background-color:#F00;
width:0px;
}
</style>
</head> <body>
<div id="scjg"></div>
<div id="sctp"></div>
ajax+FormData+javascript 实现无刷新表单注册
<form method="post">
姓名<input name="username" type="text" id="username">
<br>
密码<input name="password" type="password" id="password">
<br>
邮箱<input name="email" type="text" id="email">
<br>
<div id="jdw"><div id="jdn"></div></div>
文件<input name="nfile" type="file" id="nfile">
<br>
<input type="submit" value="提交"></form>
</body>
</html>
<?php
//print_r($_POST);
//print_r($_FILES);
$ary=array();
if($_FILES["nfile"]["error"]>0){
$ary['jg']='上传附件有问题，有可能没有附件';
echo json_encode($ary);
exit();
} $path="./upfile/"; $name=$_FILES["nfile"]['name'];
//附件上传
if(move_uploaded_file($_FILES["nfile"]['tmp_name'],iconv("UTF-8","GBK",$path.$name)))
{
$ary['jg']="上传成功";
$ary['name']=$path.$name;
}else{
$ary['jg']="上传失败";
}
echo json_encode($ary); ?>