JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
程序员文章站
2024-02-06 17:13:28
本文实例讲述了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>
运行效果图如下：
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript图片操作技巧大全》、《javascript图形绘制技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。