无刷新预览所选择的图片示例代码


Posted in Javascript onApril 02, 2014

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript"> 
//本地图片预览 
function setImagePreview(fieldupload, image, imagediv) { 
var docObj = document.getElementById(fieldupload); 
var imgObjPreview = document.getElementById(image); 
if (docObj.files && docObj.files[0]) { 
//火狐下,直接设img属性 
imgObjPreview.style.display = 'block'; 
imgObjPreview.style.width = '150px'; 
imgObjPreview.style.height = '150px'; 
//imgObjPreview.src = docObj.files[0].getAsDataURL(); 
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); 
} else { 
//IE下,使用滤镜 
docObj.select(); 
var imgSrc = document.selection.createRange().text; 
var localImagId = document.getElementById(imagediv); 
//必须设置初始大小 
localImagId.style.width = "150px"; 
localImagId.style.height = "150px"; 
//图片异常的捕捉,防止用户修改后缀来伪造图片 
try { 
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 
} catch (e) { 
alert("您上传的图片格式不正确,请重新选择!"); 
return false; 
} 
imgObjPreview.style.display = 'none'; 
document.selection.empty(); 
} 
return true; 
} 
</script> 
</head> <body> 
<div id="localImag"> <img id="preview" width="150px" height="150px" src="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_%e6%9a%82%e6%97%a0%e5%9b%be%e7%89%87.gif" alt="" /></div> 
<div> 
<input type="file" onchange="javascript:setImagePreview('upload','preview','localImag');" id="upload" /> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
Javascript的一种模块模式
Sep 08 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 #Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 #Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 #Javascript
js 日期比较相关天数代码
Apr 02 #Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 #Javascript
网页广告中JS代码的信息监听示例
Apr 02 #Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 #Javascript
You might like
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
大学生求职简历的自我评价
2013/10/21 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
合作意向书范本
2014/03/31 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
会计岗位说明书
2014/07/29 职场文书
小学见习报告
2014/10/31 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
英文版辞职信
2015/02/28 职场文书
车间质检员岗位职责
2015/04/08 职场文书
培养联系人考察意见
2015/06/01 职场文书
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python