上传图片预览JS脚本 Input file图片预览的实现示例


Posted in Javascript onOctober 23, 2014

在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意。要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的。幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友!

代码很简单,如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By:DragonDean</title>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");

var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px'; 
//imgObjPreview.src = docObj.files[0].getAsDataURL();

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

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>

测试在IE8,FF12.0和谷歌chrome 28.0.1500.72都能用!

Javascript 相关文章推荐
JavaScript事件委托用法分析
Jan 24 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
详解React之key的使用和实践
Sep 29 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
微信小程序解析富文本过程详解
Jul 13 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
如何基于viewport vm适配移动端页面
Nov 13 Javascript
实用框架(iframe)操作代码
Oct 23 #Javascript
form.submit()不能提交表单的原因分析
Oct 23 #Javascript
Google Maps API地图应用示例分享
Oct 23 #Javascript
深入分析JQuery和JavaScript的异同
Oct 23 #Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 #Javascript
用jquery模仿的a的title属性的例子
Oct 22 #Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 #Javascript
You might like
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
javascript json2 使用方法
2010/03/16 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
简单了解Python生成器是什么
2019/07/02 Python
AUC计算方法与Python实现代码
2020/02/28 Python
Python map及filter函数使用方法解析
2020/08/06 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
车贷收入证明范本
2014/01/09 职场文书
销售助理岗位职责
2014/02/21 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
2014年法院工作总结
2014/11/24 职场文书
家庭贫困证明
2015/06/16 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript