废话不说  直接上代码

<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+'1');  
            };  
            image.src= data;  
            document.getElementById('image').src = evt.target.result;
        }

        reader.readAsDataURL(file.files[0]);
        $("#image").attr({'width':'100px','height':'100px'});
    }

</script>
</body>
</html>

js本地预览图片的更多相关文章

  1. js 本地预览图片和得到图片实际大小

    //填充预览图片 function adpter(file, upfile) { var imgName = new Date().getTime() + file.name.substr(file. ...

  2. 本地预览图片html和js例子

    本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  3. FileReader本地预览图片

    <body> <p><label>请选择一个图像文件:</label><input type="file" id=" ...

  4. js在本地预览图片

    移动web <body> <form enctype="multipart/form-data" name="form1"> 上传文件: ...

  5. H5实现本地预览图片

    我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  6. 浏览器 本地预览图片 window.url.createobjecturl

    第一种方式 <script type="text/javascript"> function setImagePreview() { var docObj = docu ...

  7. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  8. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  9. 用js实现预览待上传的本地图片

    js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...

随机推荐

  1. Sigmoid函数

    Sigmoid函数是一个S型函数. Sigmoid函数的数学公式为: 它是常微分方程 的一个解. Sigmoid函数具有如下基本性质: 定义域为 值域为, 为有界函数 函数在定义域内为连续和光滑函数 ...

  2. 要重定向 IO 流，Process 对象必须将 UseShellExecute 属性设置为 False。

    Process  p1= new Process(); p1.StartInfo.UseShellExecute = false;

  3. jQuery仿淘宝图片无缝滚动轮播

    自己前天,也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery). 其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播,一直到现在也没有真正的写好,这次写得差不多了. 但是还有 ...

  4. 用mui框架开发手机app项目实践中的那些事儿

    http://www.yilingsj.com/xwzj/2015-04-29/260.html 最近在玩mui框架,坑的我是:西湖的水,全都是眼泪!!! 公司的手机app要进行改版,我率先想到的是j ...

  5. Angular - - $interpolate 和 $parse

    $interpolate 将一个字符串编译成一个插值函数.HTML编译服务使用这个服务完成数据绑定. 使用:$interpolate(text,[mustHaveExpression],[truste ...

  6. 如何在windows下载和安装Apache

    进入apache服务器官网http://httpd.apache.org/,这里我们以下载稳定版的httpd 2.4.25为例,点击"Files for Microsoft Windows& ...

  7. Delphi实例之一个较复杂的记事本的实现

    http://www.mamicode.com/info-detail-110813.html delphi中控件位置及自动排版的问题 http://blog.csdn.net/avan_lau/ar ...

  8. js验证IP及子网掩码的合法性

    function checkIP(ip) {     obj=ip;    var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0 ...

  9. ejb ql 返回object

    String sqlStr="select t.car_kind,count(t) from table1 t where t.jb_date='"+jb_date+"' ...

  10. Gdb远程调试Linux内核遇到的Bug

    知识共享许可协议本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/gdb-bug 本博客同步在http://www.cn ...