无刷新方式
使用无刷新方式，与使用刷新方式的唯一的区别就是阻止了页面的跳转，我们通常会有两种方式来实现。
在表单提交事件的末尾加上return false
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(){
// to do something
···
// 阻止页面跳转
return false;
}
</script>
使用h5相关方式
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(event){
// to do something
···
// 阻止页面跳转
event.preventDefault();
}
</script>
上传细节:
ajax对象有一个叫upload的属性，而且upload也作为一个对象而存在。其拥有一个叫onprogress的方法，我们可以通过监测这个方法，来查看文件上传过程中的百分比。
前端页面代码示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<input type="text" name="username">
<input type="file" name="pic">
<style>
#parent1 {width:400px;height:34px;border:1px solid #033;}
#son {height:100%;background-color:green}
</style>
<div id="parent1">
<div id="son" style="width:0%;">
</div>
</div>
<input type="submit" value="Register" />
</form>
<script>
window.onload=function(){
var form=document.getElementsByTagName('form')[0];
form.onsubmit=function(evt){
var fd=new FormData(form);
//console.log(fd);
var ajax = new XMLHttpRequest();
console.log(ajax);
ajax.onreadystatechange=function(){
console.log(ajax.readyState+'state!!!');
if(ajax.readyState==4){
console.log(ajax.response);
}
}
ajax.upload.onprogress=function(evt1){
console.log(evt1);
var loaded = evt1.loaded;
var total = evt1.total;
document.getElementById("son").style.width =(loaded/total)*parent1.clientWidth+'px';
}
ajax.open('post','./fileup.php');
ajax.send(fd);
evt.preventDefault();
//return false;
}
}
</script>
</body>
</html>
- 转载整理自 PHP Ajax实现无刷新附件上传
