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


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 相关文章推荐
javascript radio 联动效果
Mar 04 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
Nuxt.js实战详解
Jan 18 Javascript
js实现车辆管理系统
Aug 26 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设计模式 Facade(外观模式)
2011/06/26 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
JS验证码实现代码
2017/09/14 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
简单实现Python爬取网络图片
2018/04/01 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python 3.8 新功能全解
2019/07/25 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
python中if及if-else如何使用
2020/06/02 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
计算机专业求职信
2014/06/02 职场文书
企业负责人任命书
2014/06/05 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis