上传图片预览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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 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开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
Python中的两个内置模块介绍
2015/04/05 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
2015年元旦活动总结
2014/05/09 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
道歉的话怎么说
2015/05/12 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
丧事答谢词大全
2015/09/30 职场文书
古诗之感恩老师
2019/10/24 职场文书
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB
MySQL如何使备份得数据保持一致
2022/05/02 MySQL
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers