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不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
Prototype框架详解
Nov 25 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 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
使用PHP Socket写的POP3类
2013/10/30 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python PyTorch预训练示例
2018/02/11 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
高中生校园生活自我评价
2013/09/19 职场文书
成教毕业生自我鉴定
2013/10/23 职场文书
总经理助理的职责
2014/03/14 职场文书
家长学校工作方案
2014/05/07 职场文书
心得体会的写法
2014/09/05 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
python库sklearn常用操作
2021/08/23 Python
业余无线电通联Q语
2022/02/18 无线电
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电