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


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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
javascript getElementsByClassName函数
Apr 01 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
js网页右下角提示框实例
Oct 14 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
jQuery的事件预绑定
Dec 05 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
详解vue中使用protobuf踩坑记
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无敌近乎加密方式!
2010/07/17 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
php实现等比例压缩图片
2018/07/26 PHP
PDO::rollBack讲解
2019/01/29 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
深入解析Python中的urllib2模块
2015/11/13 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
Python占用的内存优化教程
2019/07/28 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
白酒业务员岗位职责
2013/12/27 职场文书
2014学年自我鉴定
2014/02/23 职场文书
大学军训感言1500字
2014/03/09 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
党员带头倡议书
2015/04/29 职场文书
起诉书范文
2015/05/20 职场文书