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


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 相关文章推荐
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
vue项目中axios使用详解
Feb 07 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
vue.js实现双击放大预览功能
Jun 23 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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调用时间格式的参数详解
2013/06/06 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
JS 常用校验函数
2009/03/26 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
javaScript之split与join的区别(详解)
2017/11/08 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
Python中join和split用法实例
2015/04/14 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
写给保洁员表扬信
2014/01/08 职场文书
简单租房协议书
2014/04/09 职场文书
秋季运动会开幕词
2015/01/28 职场文书
教师师德工作总结2015
2015/07/22 职场文书