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


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 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 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
Wordpress php 分页代码
2009/10/21 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
Python pymongo模块常用操作分析
2018/09/01 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
Sony C++笔试题
2013/03/10 面试题
金融专业个人求职信
2013/09/22 职场文书
统计专业自荐书
2014/07/06 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
信仰纪录片观后感
2015/06/08 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
区域销售大会开幕词
2016/03/04 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
python编程实现清理微信重复缓存文件
2021/11/01 Python