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


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中的集合及效率
Jan 08 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
javascript中this用法实例详解
Apr 06 Javascript
vue如何将v-for中的表格导出来
May 07 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抽象类 介绍
2012/06/13 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP6新特性分析
2016/03/03 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
Python打印输出数组中全部元素
2018/03/13 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
PyQt5实现下载进度条效果
2018/04/19 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
Python创建自己的加密货币的示例
2021/03/01 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
家教广告词
2014/03/19 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang