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 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
vue+ts下对axios的封装实现
Feb 18 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP实现读取一个1G的文件大小
2013/08/24 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
JavaScript 数组运用实现代码
2010/04/13 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
Tensorflow卷积神经网络实例
2018/05/24 Python
python tornado微信开发入门代码
2018/08/24 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
带你认识Django
2019/01/15 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
Python sorted对list和dict排序
2020/06/09 Python
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
学生手册家长评语
2014/02/10 职场文书
市政管理求职信范文
2014/05/07 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
贷款担保书范本
2015/09/22 职场文书