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


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 相关文章推荐
匹配任意字符的正则表达式写法
Apr 29 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
Vue使用NProgress的操作过程解析
Oct 10 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
再谈javascript原型继承
2014/11/10 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
简单的编程0基础下Python入门指引
2015/04/01 Python
python实现维吉尼亚算法
2019/03/20 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
利用python实现逐步回归
2020/02/24 Python
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
幼儿园老师辞职信
2014/01/20 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
职业生涯规划书范文
2014/03/10 职场文书
服务承诺书怎么写
2014/05/24 职场文书
禁止酒驾标语
2014/06/25 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
培根随笔读书笔记
2015/07/01 职场文书
Python字符串常规操作小结
2022/04/03 Python
Python字符串的转义字符
2022/04/07 Python