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插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
随机推荐
- mfc学生成绩录入与查询
1.声明结构体 struct Person{ char name[8]; char yuwen[8]; char math[8];}; 2.成绩录入 在"保存"按钮中实现以下代码 ...
- duilib\utils\utils.h(251) : error C2504: “VARIANT”: 未定义基类
转载:http://blog.csdn.net/SP_daiyq/article/details/44542939?locationNum=3 创建win32应用程序的工程文件,删除不需要的代码,只留 ...
- UESTC 1256 昊昊爱运动 Map
昊昊爱运动 Time Limit: 3000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) 昊昊喜欢运动 他N天 ...
- SqlSever基础 datepart函数 返回现在几点了
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- Cheatsheet: 2013 09.01 ~ 09.09
.NET Multi Threaded WebScraping in CSharpDotNetTech .NET Asynchronous Patterns An Overview of Projec ...
- HDU 5826 physics（物理）
physics(物理) Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) D ...
- HTML笔记（七）head相关元素<base> & <meta>
<head>元素是所有头部元素的容器. 可添加的标签有:<title>.<base>.<link>.<meta>.<script> ...
- jQuery里面的普通绑定事件和on委托事件
以click事件为例: 普通绑定事件:$('.btn1').click(function(){}绑定 on绑定事件:$(document).on('click','.btn2',function(){ ...
- mybatis的xml文件中如何处理大小于号
在mybatis的xml配置文件中会遇到大小于号转化的问题,解决问题的方法如下: 1.用转义字符把>和<替换掉 SELECT * FROM test WHERE AND start_dat ...
- 关于远程连接MySQL数据库的问题解决
安装MySQL sudo apt-get install mysql-server 这个应该很简单了,而且我觉得大家在安装方面也没什么太大问题,所以也就不多说了,下面我们来讲讲配置. 配置MySQL ...