JS兼容各个浏览器的本地图片上传即时预览效果\、
在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果，在IE10以下浏览器中使用滤镜来解决图片显示问题。
HTML5中的FileReader对象主要是把文件读入内存中，并且读取文件中数据，目前为止，firefox3.6+、chrome6+、safari5.2+、opera11+及IE10浏览器支持FileReader对象，它有一下5种方法：
1、readBinaryString;
2、readAsText;
3、readAsDataURL 将对象或文件中数据读取为一串DataURL字符串，就是将数据以一种特殊格式的URL地址形式直接读入页面。
4、readAsArrayBuffer;
5、abort;
现在我们要用的是第三种
var aFile=ev.dataTransfer.files;
var reader=new FileReader();
reader.onload=function(){
alert(reader.result);
};
reader.onerror=function(){
alert('读取错误');
};
reader.onloadend=function(){
alert('读取完成');
};
reader.onloadstart=function(){
alert('开始读取');
};
reader.onprogress=function(ev){
var scale=ev.loaded/ev.total;
alert('正在读取');
}
rearder.onabort=function(){
alert('读取中断');
};
强制中断：
reader.abort();
通过文本形式读取：
reader.readAsText(aFile[0],'编码格式');
编码格式: utf-8
gb2312
通过base64方式读取：
reader.readAsDataURL(aFile[0]);
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
img{
width:100px;
height:100px;
}
form label{
display:inline-block;
width:100px;
height:30px;
line-height:30px;
text-align:right;
}
</style>
</head>
<body>
<form id="infoForm" action="url" method="post" enctype="multipart/form-data">
<!--图片上传隐藏信息-->
<!--accept="audio/*|video/*|image/*|MIME_type 规定多接受的文件"-->
<input type="file" accept="image/*" prev-target="#goodPic" id="goodsPreview" style="display:none"/>
<input type="file" accept="image/*" prev-target="#goodsCarouselImg1" id="loop1" style="display:none"/>
<input type="file" accept="image/*" prev-target="#goodsCarouselImg2" id="loop2" style="display:none"/>
<input type="file" accept="image/*" prev-target="#goodsCarouselImg3" id="loop3" style="display:none"/>
<ul>
<li>
<label for="goodsName">商品名称</label>
<input id="goodsName" type="text" placeholder="请输入商品名称"/>
</li>
<li>
<label for="goodsNum">商品编号</label>
<input id="goodsNum" type="text" placeholder="请输入商品编号"/>
</li>
<li>
<label for="goodsPrice">商品价格</label>
<input id="goodsPrice" type="text" placeholder="请输入商品价格"/>
</li>
<li class="goodsList">
<label>商品主图</label>
<img src="img/goods1.jpg" file-target="#goodsPreview"id="goodsPic" alt="商品主图"/>
</li>
<li class="goodsList">
<label>商品轮播图</label>
<img src="img/goods1.jpg" file-target="#loop1" id="goodsCarouselImg1" alt="商品轮播图1"/>
<img src="img/goods1.jpg" file-target="#loop2" id="goodsCarouselImg2" alt="商品轮播图2"/>
<img src="img/goods1.jpg" file-target="#loop3" id="goodsCarouselImg3" alt="商品轮播图3"/>
</li>
<li><label> </label><input type="button" id="subBtn" class="btn" value="提交信息"/></li>
</ul>
</form>
</body>
<script src="jquery.1.11.3.js"></script>
<script>
$("#goodsPic,#goodsCarouselImg1,#goodsCarouselImg2,#goodsCarouselImg3").click(function(){
$($(this).attr('file-target')).click();
});
$('[type=file]').on('change',function(){
var preview=$($(this).attr('prev-target'));
var reader=new FileReader();
reader.onload=function(e){
var avatorFile= e.target.result;
if(!avatorFile){
alert('您的浏览器不支持预览功能');
return;
}
preview.attr('src',avatorFile);
}
reader.readAsDataURL(this.files[0]);
})
</script>
</html>
JS兼容各个浏览器的本地图片上传即时预览效果\、的更多相关文章
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- ThinkPHP5与JQuery实现图片上传和预览效果
内容正文 这篇文章主要为大家详细介绍了thinkphp上传图片功能,和jquery预览图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先上效果图: html和js代码如下: <!DO ...
- uploadPreview 兼容多浏览器图片上传及预览插件使用
uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...
- js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌
<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- input file实现多选，限制文件上传类型，图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- 【转】html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- jQuery：[1]实现图片上传并预览
jQuery:[1]实现图片上传并预览 原理 预览思路 1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL: 2.把对象URL赋值给实现写好的img标签的src属性 Fil ...
随机推荐
- 结果集(ResultSet)用法
结果集(ResultSet)是数据中查询结果返回的一种对象,可以说结果集是一个存储查询结果的对象,但是结果集并不仅仅具有存储的功能,他同时还具有操纵数据的功能,可能完成对数据的更新等. 结果集读取数据 ...
- cocos2d-2.0-x-2.0.4生成vs2010项目模板的解决方法
cocos2d教学书籍还有网上好多博主都说仅仅要执行一下install-templates-msvc.bat这个批处理文件即可了.但是我按了半天vs2010就是不出现令小伙伴惊喜的cocos2d wi ...
- spark hive结合杂记(hive-site.xml)
1.下载spark源码,在spark源码目录下面有个make-distribution.sh文件,修改里面的参数,使编译后能支持hive,修改后执行该文件.(要预先安装好maven才能编译). 2.将 ...
- syntaxerror : unexpected token &
部署网站到服务器后,添加.修改.删除数据都会出现这个错误,之前都没有出现过. 之前的服务器系统都是windowserver2008,而这次所部署的服务器系统也是2008,只是此服务器一开始并没有安装. ...
- python3----连接字符串数组(join)
join 方法用于连接字符串数组 s = ['a', 'b', 'c', 'd'] print(''.join(s)) print('-'.join(s)) results: abcd a-b-c-d ...
- python3----转换大小写(upper lower capitalize and title)
和其他语言一样,Python为string对象提供了转换大小写的方法:upper() 和 lower().还不止这些,Python还为我们提供了首字母大写,其余小写的capitalize()方法,以及 ...
- hibernate 懒加载图解
- CMU-15445 LAB3:事务隔离，two-phase locking，锁管理器
概述 本lab将实现一个锁管理器,事务通过锁管理器获取锁,事务管理器根据情况决定是否授予锁,或是阻塞等待其它事务释放该锁. 背景 事务属性 众所周知,事务具有如下属性: 原子性:事务要么执行完成,要么 ...
- iOS cocos2d 2游戏开发实战（第3版）书评
2013是游戏爆发的一年,手游用户也是飞速暴增.虽然自己不做游戏,但也是时刻了解手机应用开发的新动向.看到CSDN的"写书评得技术图书赢下载分"活动,就申请了一本<iOS c ...
- codevs1068 乌龟棋==洛谷P1541 乌龟棋
P1541 乌龟棋 题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家 ...