zoukankan      html  css  js  c++  java
  • js本地预览图片

    废话不说  直接上代码

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <body>
     <img id="image" src=""/>
    <br/>
     <input type="file" id="file" onchange="selectImage(this);"/> <br>
    <br/>
    <script>
        function selectImage(file) {
            alert(file.value.substring(file.value.lastIndexOf('.')));
            if (!file.files || !file.files[0]) {
                return;
            }

            var reader = new FileReader();
            reader.onload = function (evt) {
                var data = evt.target.result;  
                //加载图片获取图片真实宽度和高度  
                var image = new Image();  

                image.onload=function(){  
                    var width = image.width;  
                    var height = image.height;  
                    alert(width+'======'+height+"====="+file.files[0].size);  
                };  

                image.src= data;  
                document.getElementById('image').src = evt.target.result;
            }

            reader.readAsDataURL(file.files[0]);
            $("#image").attr({'width':'100px','height':'100px'});
        }
    </script>
    </body>
    </html>
  • 相关阅读:
    11. Container With Most Water
    面试题------前端框架与其他
    python----生成器--列表推导式-----内置函数-----
    python----函数-----有参装饰器----迭代器
    python---闭包函数应用---装饰器
    python----函数-----名称空间与作用域 闭包函数
    python ----函数
    python---函数
    文件操作
    集合 文件部分操作
  • 原文地址:https://www.cnblogs.com/wodetian/p/6491197.html
Copyright © 2011-2022 走看看