js实现上传图片之上传前预览图片


Posted in Javascript onMarch 25, 2013

上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出来了。功能很简单,却很实用。

预览图片的js代码

<script type="text/javascript"> 
function setImagePreview(docObj,localImagId,imgObjPreview) 
{ 
if(docObjfiles && docObjfiles[0]) 
{ 
//火狐下,直接设img属性 
imgObjPreviewstyledisplay = 'block'; 
imgObjPreviewstylewidth = '300px'; 
imgObjPreviewstyleheight = '200px'; 
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 
imgObjPreviewsrc = windowURLcreateObjectURL(docObjfiles[0]); 
} 
else 
{ 
//IE下,使用滤镜 
docObjselect(); 
var imgSrc = documentselectioncreateRange()text; 
//必须设置初始大小 
localImagIdstylewidth = "300px"; 
localImagIdstyleheight = "200px"; 
//图片异常的捕捉,防止用户修改后缀来伪造图片 
try 
{ 
localImagIdstylefilter="progid:DXImageTransformMicrosoftAlphaImageLoader(sizingMethod=scale)"; 
localImagIdfiltersitem("DXImageTransformMicrosoftAlphaImageLoader")src = imgSrc; 
} 
catch(e) 
{ 
alert("您上传的图片格式不正确,请重新选择!"); 
return false; 
} 
imgObjPreviewstyledisplay = 'none'; 
documentselectionempty(); 
} 
return true; 
} 
</script>

fileupload控件及用来预览图片的image:
<div id="localImag" style="width: 300px; height: 200px"> 
<img id="preview" alt="预览图片" src="//Images/noImagegif" width="300px" height="200px" /> 
</div> 
<asp:FileUpload ID="PicLoad" Width="300px" runat="server" onchange="javascript:setImagePreview(this,localImag,preview);"> 
</asp:FileUpload>

功能很简单,代码也很易懂,相信不用我多废话大家也能看懂吧。感觉写这样的文章,真的没啥好说的,不多说,还是把重点放在代码上吧。
Javascript 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
vue 组件基础知识总结
Jan 26 Vue.js
使用jQuery validate 验证注册表单实例演示
Mar 25 #Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 #Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 #Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 #Javascript
js 字符串转换成数字的三种方法
Mar 23 #Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 #Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 #Javascript
You might like
十天学会php(2)
2006/10/09 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
js实现日历
2020/11/07 Javascript
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
EJB的基本架构
2016/09/22 面试题
财务管理专业毕业生求职信范文
2013/09/21 职场文书
环保建议书作文
2014/03/12 职场文书
《花木兰》教学反思
2014/04/09 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
财务管理专业求职信
2014/06/11 职场文书
团日活动总结模板
2014/06/25 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
2014年药房工作总结
2014/11/22 职场文书
体育教师个人总结
2015/02/09 职场文书
项目合作意向书
2015/05/08 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
element多个表单校验的实现
2021/05/27 Javascript
Python实现排序方法常见的四种
2021/07/15 Python
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers