实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title>ajax上传文件</title>
<script type="text/javascript">
//加载提交事件给from设置提交事件
window.onload=function(){
var fm=document.getElementsByTagName('form')[0];
fm.onsubmit=function(evt){
//1、收集信息--普通表单信息和文件信息
var fd=new FormData(fm);//代表事件的元素节点对象
//2、ajax传递表单信息到服务器
var xhr=new XMLHttpRequest();//传递数据
xhr.onreadystatechange=function(){
//判断
if(xhr.readyState==4){
alert(xhr.responseText);//打印传输的信息
}
}
xhr.open('POST','./02.php');//数据传输格式 ，服务器端
xhr.send(fd);//发送
//阻止事件流
evt.preventDefault();//阻止浏览器跳转
}
}
</script>
</head>
<body>
<h2 align="center">用ajax实现上传文件</h2>
<form action="./02.php" method="POST" enctype="multipart/form-data">
<fieldset>
<legend align="center">文件上传</legend>
<p><strong>用户姓名:</strong><input type="text" name="username"/></p>
<p><strong>选择文件:</strong><input type="file" name="upload"></p>
</fieldset>
<p align="center"><button type="submit" name="submit" >上传</button></p>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
