JS上传前预览图片实例


Posted in Javascript onMarch 25, 2013

预览图片的js代码:

<script type="text/javascript">
        function setImagePreview(docObj,localImagId,imgObjPreview) 
        {
            if(docObj.files && docObj.files[0])
            {
                //火狐下,直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '300px';
                imgObjPreview.style.height = '200px';                    

                //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式  
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            }
            else
            {
                //IE下,使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                //必须设置初始大小
                localImagId.style.width = "300px";
                localImagId.style.height = "200px";
                //图片异常的捕捉,防止用户修改后缀来伪造图片
                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>

fileupload控件及用来预览图片的image:

<div id="localImag"  style="width: 300px; height: 200px">
   <img id="preview" alt="预览图片" src="https://3water.com/images/logo.gif" width="300px" height="200px" />
</div>
   <asp:FileUpload ID="PicLoad" Width="300px" runat="server" onchange="javascript:setImagePreview(this,localImag,preview);">
   </asp:FileUpload>
  

功能很简单,代码也很易懂,相信不用我多废话大家也能看懂吧。感觉写这样的文章,真的没啥好说的,不多说,还是把重点放在代码上吧。
Javascript 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
js运动动画的八个知识点
Mar 12 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 #Javascript
js实现上传图片之上传前预览图片
Mar 25 #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
You might like
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
部署Python的框架下的web app的详细教程
2015/04/30 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
Python实现八皇后问题示例代码
2018/12/09 Python
python数值基础知识浅析
2019/11/19 Python
python实现人机五子棋
2020/03/25 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
应聘自荐书
2013/10/08 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
大学毕业感言50字
2014/02/07 职场文书
优秀经理获奖感言
2014/03/04 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
毕业设计说明书
2014/05/07 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书