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


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 Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 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的网址
2006/11/25 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
python能否java成为主流语言吗
2020/06/22 Python
详解python metaclass(元类)
2020/08/13 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
化学系大学生自荐信范文
2014/03/01 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
分家协议书
2014/04/21 职场文书
单位员工收入证明样本
2014/10/09 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
python 批量压缩图片的脚本
2021/06/02 Python