JS实现图片的预览及预览图片的宽高获取
2017-01-19 13:48
127 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片预览</title> </head> <style type="text/css"> #preview { height: 200px; width: 200px; border:1px solid #000; } </style> <body> <div id="preview"></div> <input type="file" onchange="preview(this)" /> <script type="text/javascript"> function preview(file) { var prevDiv = document.getElementById('preview'); if (file.files && file.files[0]) { var reader = new FileReader(); reader.onload = function(evt){ var img = new Image() img.addEventListener("load",function () {
console.log("预览图片的原始宽度:"+img.width);
console.log("预览图片的原始高度:"+img.height); prevDiv.style.width = img.width * 0.3 + "px"; prevDiv.style.height = img.height * 0.3 + "px"; img.width = img.width * 0.3; img.height = img.height * 0.3; prevDiv.innerHTML = ""; prevDiv.appendChild(img); },false); img.src = evt.target.result; } reader.readAsDataURL(file.files[0]); } else { prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>'; } } </script> </body> </html>
相关文章推荐
- JS兼容IE和其它浏览器获取图片大小和预览的实现
- JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
- 用js实现上传图片前的预览(TX的面试题)
- JS实现图片上传前预览 [转改]
- 纯JS实现的批量图片预览加载功能
- JS之 前端图片预览的实现,浏览器的兼容性真恶心
- JS实现图片的上传和预览
- js脚本实现上传图片无刷新预览!
- asp.net+js实现上传图片即时预览
- 纯JS实现的批量图片预览加载功能
- jsp中js实现本地图片预览基本功能
- js 实现在页面实现上传图片的预览,并判断大小
- 用JS实现上传图片前预览
- JS实现图片上传前预览
- js实现图片上传预览
- 用js实现预览待上传的本地图片
- js实现IE7图片上传预览的功能代码
- js 获取网络图片的高度和宽度的实现方法(变通了下)
- [转]很简单的JS实现上传前预览图片(兼容IE8)
- JS实现上传本地图片前先预览