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 相关文章推荐
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
ionic实现底部分享功能
May 11 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 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
论建造顺序的重要性
2020/03/04 星际争霸
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
自动更新作用
2006/10/08 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
python数据结构之二叉树的遍历实例
2014/04/29 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python3.6正式版新特性预览
2016/12/15 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
护理专业毕业生自荐书
2014/05/24 职场文书
专题组织生活会方案
2014/06/15 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书