<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<Meta name="description" content="" />
<Meta name="keywords" content="" />
<style type="text/css">
img{
width:200px;
}
</style>
<script type="text/javascript">
var fm = document.getElementById('aform');
var fd = new FormData(fm);
var xhr = new XMLHttpRequest();
xhr.open('POST','from.PHP',true);
xhr.onreadystatechange = function(){
if(this.readyState == 4){
document.getElementById('show').innerHTML = this.responseText;
}
}
xhr.send(fd);
}
//图片预览的函数,当点击 预览按钮时,调用
function prew(){
var pic = document.getElementsByName('pic')[0].files[0]; console.log(pic); var fd = new FormData(); //html5中 fd.append('pic',pic); //将图片加到 formdata中 var tmpimg = document.createElement('img'); //创建img标签 tmpimg.src = window.URL.createObjectURL(pic); //创建img 的src属性,并赋值 document.getElementsByTagName('body')[0].appendChild(tmpimg); //把img 标签 (强制)加载到body中显示; } </script> </head> <body> <form id="aform"> <p>用户名<input type="text" name="user" > <p>年龄<input type="text" name="age" > <p>邮箱<input type="text" name="email" > <input type="button" onclick="fa();" value="发送"> <p> <input type="file" name="pic"> <input type="button" onclick="prew();" value="预览"> </form> <div id="show"></div> </body> </html> 原文链接：https://www.f2er.com/ajax/162911.html
