JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】


Posted in Javascript onApril 24, 2017

本文实例讲述了JS实现获取图片大小和预览的方法。分享给大家供大家参考,具体如下:

<!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>JS获取图片大小和预览【兼容IE和其它浏览器】</title>
</head>
<script type="application/javascript">
function previewImage(oImage,preViewId){
  if(!oImage.value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)){
    //alert('图片格式无效!');
    return;
  }
  var imgPath = "";
  if(document.all){
    //低版本IE浏览器
    oImage.select();
    imgPath = document.selection.createRange().text;
    //使用滤镜效果
    var tempValue = "progid:DXImageTransform.Microsoft.AlphaImageLoader("
    tempValue += "enabled='true',sizingMethod='scale',src=\"" + imgPath + "\")";
    document.getElementById(preViewId).style.filter = tempValue;
  }else{
    //非IE浏览器,如火狐google等浏览器
    imgPath = window.URL.createObjectURL(oImage.files[0]); //FF7.0以上
    document.getElementById(preViewId).src = imgPath; //显示预览图
  }
};
function getFileSize(objFile){
  var fileSize = objFile.fileSize || 0;
  if(fileSize == 0) {
    fileSize = objFile.files[0].size;
  }
  return fileSize;
}
function imageChange(){
  var oImg = document.getElementById("imageFile01");
  previewImage(oImg,"preview");
  var fileSize = getFileSize(oImg);
  fileSize = Math.ceil(fileSize / 1024) + "KB";
  var filePath =oImg.value;
  var agent = window.navigator.userAgent;
  var tempValue = "<br>File size: " + fileSize;
  tempValue += "<br>File path: " + filePath;
  tempValue += "<br>agent=" + agent;
  document.getElementById("imageInfo").innerHTML = tempValue;
};
</script>
<body>
<h3>JS获取图片大小和预览【兼容IE和其它浏览器】</h3>
<img id="preview" style="width: 100px; height: 60px; border: 0px;" />
<br>
<input name="imageFile01" id="imageFile01" type="file" onchange="javascript:imageChange();" />
<br>
<div id="imageInfo"></div>
</body>
</html>

运行效果图如下:

JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
js字符编码函数区别分析
Dec 28 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
详解angular 中的自定义指令之详解API
Jun 20 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 #Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 #Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 #Javascript
JS简单获取日期相差天数的方法
Apr 24 #Javascript
Angular.js中控制器之间的传值详解
Apr 24 #Javascript
jquery submit()不能提交表单的解决方法
Apr 24 #jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 #jQuery
You might like
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
jquery获取input的value问题说明
2010/08/19 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
在Django的session中使用User对象的方法
2015/07/23 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
竞聘书格式及范文
2014/03/31 职场文书
关于环保的建议书
2014/05/12 职场文书
交通违章检讨书
2014/09/21 职场文书
整改报告怎么写
2014/11/06 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python