上传图片预览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 相关文章推荐
三种取消选中单选框radio的方法
Sep 09 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
react 中父组件与子组件双向绑定问题
May 20 Javascript
微信小程序自定义底部弹出框功能
Nov 18 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取整数函数常用的四种方法小结
2012/07/05 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
Internet体系结构
2014/12/21 面试题
护士自我鉴定范文
2013/10/06 职场文书
会计毕业生自我鉴定
2013/11/04 职场文书
测绘工程系学生的自我评价
2013/11/30 职场文书
工作自我评价怎么写
2014/01/29 职场文书
《母鸡》教学反思
2014/02/25 职场文书
公司接待方案
2014/03/08 职场文书
高三学习决心书
2014/03/11 职场文书
小学生作文评语大全
2014/04/21 职场文书
2014公司年终工作总结
2014/12/19 职场文书
新员工试用期自我评价
2015/03/10 职场文书
监理中标通知书
2015/04/16 职场文书
鸡毛信观后感
2015/06/11 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
golang json数组拼接的实例
2021/04/28 Golang
Python数据分析入门之数据读取与存储
2021/05/13 Python
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis