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


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 简单抽屉效果的实现代码
Mar 09 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
原生JavaScript实现五子棋游戏
Nov 09 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
深入PHP变量存储的详解
2013/06/13 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
jQuery 表单验证扩展(三)
2010/10/20 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
Python 3中的yield from语法详解
2017/01/18 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
python3安装crypto出错及解决方法
2019/07/30 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
Java如何获得ResultSet的总行数
2016/09/03 面试题
自动化职业生涯规划书范文
2014/01/03 职场文书
挂牌仪式主持词
2014/03/20 职场文书
倡议书范文格式
2014/05/12 职场文书
小学家长学校培训材料
2014/08/24 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis