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 相关文章推荐
js判断屏幕分辨率的代码
Jul 16 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
JS访问对象两种方式区别解析
Aug 29 Javascript
使用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
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP面向对象分析设计的经验原则
2008/09/20 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
laravel 数据验证规则详解
2019/10/23 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
Python根据服务获取端口号的方法
2019/09/25 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
培训自我鉴定
2014/01/31 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
大学迎新生标语
2014/10/06 职场文书
保证书格式
2015/01/16 职场文书
python lambda 表达式形式分析
2022/04/03 Python