欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-06 12:33:44
本文实例讲述了js实现获取图片大小和预览的方法。分享给大家供大家参考,具体如下:

本文实例讲述了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图片操作技巧大全》、《javascript图形绘制技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结

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