FileReader本地预览图片
<body>
<p><label>请选择一个图像文件：</label><input type="file" id="demo_input" /></p>
<div id="demo_result"></div>
<script type="text/javascript">
var result = document.getElementById("demo_result");
var input = document.getElementById("demo_input");
if(typeof FileReader === 'undefined'){
result.innerHTML = "<p class='warn'>抱歉，你的浏览器不支持 FileReader</p>";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
}
function readFile(){
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" alt=""/>'
}
}
</script>
</body>
2,下面是我修改的，多图上传，本地预览:
<html>
<head>
<title>File Reader</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{
text-align:center;
}
#demo_result img{
border:2px solid #369;
padding:3px;
}
p{
padding:20px 0;
}
.warn{
font-weight:bold;
color:red;
}
</style>
</head>
<body> <p><label>请选择一个图像文件：</label>
<input type="file" multiple="multiple" id="demo_input" />
</p>
<div id="demo_result"></div> <script type="text/javascript">
var result = document.getElementById("demo_result");
var input = document.getElementById("demo_input"); if(typeof FileReader === 'undefined'){
result.innerHTML = "<p class='warn'>抱歉，你的浏览器不支持 FileReader</p>";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
} function readFile(){ for(var i=0;i<this.files.length;i++)
{
var file = this.files[i];
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML+= '<img src="'+this.result+'" alt=""/>';
}
}
}
</script>
</body>
</html>
FileReader本地预览图片的更多相关文章
- 本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- js 本地预览图片和得到图片实际大小
//填充预览图片 function adpter(file, upfile) { var imgName = new Date().getTime() + file.name.substr(file. ...
- js在本地预览图片
移动web <body> <form enctype="multipart/form-data" name="form1"> 上传文件: ...
- H5实现本地预览图片
我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- js本地预览图片
废话不说 直接上代码 <script type="text/javascript" src="http://code.jquery.com/jquery-late ...
- 浏览器 本地预览图片 window.url.createobjecturl
第一种方式 <script type="text/javascript"> function setImagePreview() { var docObj = docu ...
- 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取
imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...
- 利用FileReader实现上传图片前本地预览
引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
随机推荐
- 11个让你吃惊的 Linux 终端命令
原文:http://linux.about.com/od/commands/tp/11-Linux-Terminal-Commands-That-Will-Rock-Your-World.htm 作者 ...
- 浅思OC的语言特性
算了算,学习IOS已经有一段时间了.今天花了点时间思考一下OC的语言特性,让自己的心不要那么浮躁,注重基础,回归本源. OC做为一门面向对象语言,自然具有面向对象的语言特性,如封装.继承.多态.他具有 ...
- netsh winsock reset 11003
netsh winsock reset 11003 http://files.cnblogs.com/xsmhero/winsock.zip
- Cheatsheet: 2014 12.01 ~ 12.31
.NET Some Thoughts on the new .Net Introducing .NET Core Running ASP.NET on a Raspberry Pi with Mono ...
- How To Use RUN_PRODUCT In Oracle Forms
Run_Product is used to run Oracle Reports (RDF/REP files) in Oracle Forms. It invokes one of the sup ...
- [YY]已知逆序列求原序列（二分，树状数组）
在看组合数学,看到逆序列这个概念.于是YY了一道题:已知逆序列,求出原序列. 例子: 元素个数 n = 8 逆序列 a={5,3,4,0,2,1,1,0} 则有原序列 p={4,8,6,2,5,1,3 ...
- centos vpn
yum install ppp -y cd /usr/local/src wget http://dl.fedoraproject.org/pub/epel/7/x86_64/p/pptpd-1.4. ...
- hdu 4946 Just a Joke(数学+物理)
链接:http://acm.hdu.edu.cn/showproblem.php?pid=4969 Just a Joke Time Limit: 2000/1000 MS (Java/Others) ...
- Codeforces Round #279 (Div. 2) C. Hacking Cypher 前缀+后缀
C. Hacking Cypher time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- Linux Shell Bash 带有特殊含义的退出码
linux在执行完一条命令后,使用 echo $? 会显示上一条命令是否执行成功,相关状态码如下 0为成功 表格 D-1. "保留的"退出码 退出码的值 含义 例子 注释 1 通用 ...