ajax 上传图片预览
2015-09-14 23:16
369 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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">
//数据使用ajax 发送到另一个页面,不跳转
function fa(){
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>
<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">
//数据使用ajax 发送到另一个页面,不跳转
function fa(){
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>
相关文章推荐
- iOS开发常用国外网站清单
- Oozie工作流属性配置的方式与策略
- 翻译:AKKA笔记 - Actor消息 -1(二)
- 启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”错误的解决方法
- Android学习系列(二): 短信发送器
- Flume前述
- Android剪切板(ClipboardManager) 复制文本
- 第十六篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示上)
- f2fs解析(二)f2fs写checkpoint时如何冻住整个文件系统
- machine learning(11) -- classification: advanced optimization 去求cost function最小值的方法
- JAVA 垃圾收集监控
- 第一百六十五天 how can I坚持
- SQL Server 2012 AlwaysOn高可用配置之九:添加侦听器
- 使用java的DBUtils
- I/O流与异常
- jQuery编程的最佳实践
- windows7 64位编译hadoop2.7.1
- Python学习----IO编程
- C++ Map简介
- Linux程序包管理:RPM和YUM