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>
运行效果图如下:
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript图片操作技巧大全》、《javascript图形绘制技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。