废话不说  直接上代码

<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. C#代码生成工具:文本模板初体验 使用T4批量修改实体框架(Entity Framework)的类名

    转自:http://www.cnblogs.com/huangcong/archive/2011/07/20/1931107.html 在之前的文本模板(T4)初体验中我们已经知道了T4的用处,下面就 ...

  2. QStandardItemModel的简单应用

    The QStandardItemModel class provides a generic model for storing custom data. QStandardItemModel提供了 ...

  3. 【Android】Activity

    一.Android四大组件 Activity.Service.BroadCastReceiver.ContentProvider. 二.Activity的继承关系 三.建立.配置和使用Activity ...

  4. plupload 异步上传插件使用心得

    plupload 可以不依赖jquery,并且提供了 html5,flash,silverlight,html4 多种上传模式,使用起来比较简单,上一篇博客中介绍了其主要参数哈函数 一.简化用法 &l ...

  5. 最简化模型2——css3分阶段动画效果(经过实测)之转动的div

    @keyframes mymove{    0%{top: 0;left: 0;transform:rotate(50deg);}    10%{top: 100px;left: 50px;trans ...

  6. Angular - - $q 承诺与延迟

    $q 一个帮助处理异步执行函数的服务.当他们做完处理时,使用它们的返回值(或异常). 受 Kris Kowa’s Q 的启发,这是一个实现promise/deferred对象的启用. $q的两种方式- ...

  7. LINQ 的查询_联表、分组、排序

    1.查询 var v = from s in db.Set<ScoreInfo>().ToList()group s by s.subject into scoreselect new{  ...

  8. JSP EL表达式忽略方法

    JSP EL表达式忽略方法: web.xml中,和jsp中:jsp中的等级要高一些: web.xml: <?xml version="1.0" encoding=" ...

  9. ASP.NET Zero--14.一个例子（7）商品分类管理-分类搜索及分页

    分类搜索实现 1.添加搜索框 打开Index视图,添加一个搜索框,代码如下: ... <div class="portlet light"> <div class ...

  10. redis内存占用说明

    执行info命令后,找到Memory这一栏,就可以看到内存的使用信息了,如下图: # Memory used_memory:13490096 //数据占用了多少内存(字节) used_memory_h ...