JS實現圖片的預覽及預覽圖片的寬高獲取
阿新 • • 發佈:2018-11-11
<!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>