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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 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
PHP 开源AJAX框架14种
2009/08/24 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
简单的分页代码js实现
2016/05/17 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
详解VUE 数组更新
2017/12/16 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
对python sklearn one-hot编码详解
2018/07/10 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
药学专业大学生自荐信
2013/09/28 职场文书
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
家属联谊会致辞
2015/07/31 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js