上传图片预览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 相关文章推荐
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
网页图片延时加载的js代码
Apr 22 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 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
php批量删除数据
2007/01/18 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
Javascript的this详解
2019/03/23 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
python字典排序实例详解
2015/05/20 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python实现TCP通信的示例代码
2019/09/09 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
中学劳技课教师的自我评价
2014/02/05 职场文书
教师求职自荐信
2014/03/09 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
公司开会通知
2015/04/20 职场文书
违纪开除通知书
2015/04/25 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server