1. 收集表单信息
利用新技术FormData表单数据对象可以实现快速收集表单信息。
FormData是html5的新技术，在主流浏览器都可以正常使用。
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
var fm = document.getElementsByTagName('form')[0];
fm.onsubmit = function () {
//利用formData快速收集表单
var fd = new FormData(fm);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
xhr.open('post','./04.PHP');
xhr.send(fd);
return false; //阻止提交
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>ajax + javascript + form 实现无刷新表单信息提交</h2>
<form method="post" action="">
<p>用户名：<input type="text" name="username" id="username" /></p>
<p>密码：<input type="password" name="password" id="password" /></p>
<p>邮箱：<input type="text" name="email" id="email" /></p>
<p><input type="submit" value="注册" /></p>
</form>
</body>
</html>效果图：
2、ajax实现文件上传
<form enctype=”multipart/form-data”>
<input type=”file”>
服务器端：$_FILES接收附件信息(name/error/size/type/tmp_name)
move_uploaded_file(临时附件，真实附件路径名);
$_FILES 中的error字段意思
0->ok
1->大小超过PHP.ini限制
2->大小超过MAX_FILE_SIZE
3->附件只上传了一部分（不完整）
4->没有上传附件
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
var fm = document.getElementsByTagName('form')[0];
fm.onsubmit = function () {
//利用formData快速收集表单
var fd = new FormData(fm);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
xhr.open('post','./05.PHP');
xhr.send(fd);
return false; //阻止提交
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>ajax + javascript + formData 实现无刷新文件上传</h2>
<form method="post" action="">
<p>用户名：<input type="text" name="username" id="username" /></p>
<p>密码：<input type="password" name="password" id="password" /></p>
<p>邮箱：<input type="text" name="email" /></p>
<p>头像：<input type="file" name="img" /></p>
<p><input type="submit" value="注册" /></p>
</form>
</body>
</html>
<?PHP if($_FILES['img']['error'] > 0){ exit('上传附件有问题，有可能没有附件'); } $path = "./upload/"; $name = $_FILES['img']['name']; //附件上传逻辑 if(move_uploaded_file($_FILES['img']['tmp_name'],$path.$name)){ echo 'success'; } else { echo 'fail'; }效果图：
2.1 使用FormData注意：
①每个表单域必须有name属性
②在form标签里边无需设置enctype=”multipart/form-data”属性(即时有上传域)
③ajax传递FormData的数据不需要设置setRequestHeader()函数
3. 上传大附件进度条设置
<?PHP if($_FILES['img']['error'] > 0){ exit('上传附件有问题，有可能没有附件'); } $name = $_FILES['img']['name']; $name = iconv('UTF-8','GB2312',$name); $path = "./upload/"; //附件上传逻辑 if(move_uploaded_file($_FILES['img']['tmp_name'],$path.$name)){ echo 'success'; } else { echo 'fail'; }
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
var fm = document.getElementsByTagName('form')[0];
fm.onsubmit = function () {
//利用formData快速收集表单
var fd = new FormData(fm);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
//设置监听事件
xhr.upload.onprogress = function (evt) {
var loaded = evt.loaded;
var total = evt.total;
var per = Math.floor((loaded/total)*100)+"%";
document.getElementById('son').innerHTML = per;
document.getElementById('son').style.width = per;
}
xhr.open('post','./06.PHP');
xhr.send(fd);
return false; //阻止提交
}
}
</script>
<style type="text/css">
#pat {
width: 430px;
height: 40px;
border:5px solid blue;
}
#son {
width: 0%;
height: 100%;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>ajax + javascript + formData 实现无刷新文件上传</h2>
<form method="post" action="">
<p>用户名：<input type="text" name="username" id="username" /></p>
<p>密码：<input type="password" name="password" id="password" /></p>
<p>邮箱：<input type="text" name="email" /></p>
<div id="pat"><div id="son"></div></div>
<p>头像：<input type="file" name="img" /></p>
<p><input type="submit" value="注册" /></p>
</form>
</body>
</html>效果图：
