废话不说  直接上代码

<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. Python3基础 setdefault() 根据键查找值，找不到键会添加

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  2. tomcat 安全文件夹（Java之负基础实战）

    tomcat 解析网站的时候,会寻找一个文件叫  WEB-INF 这些文件外部无法访问

  3. js原生：封装document.getElementByClassName()函数

    //接口封装:封装document.getElementByClassName()函数function getElementsByClassName (cName,domTag,root) {//该函 ...

  4. 一点养老APP模式定制系统平台源码

    一点养老APP模式定制系统开发:136.1013.1824电/微:搭建一点养老APP模式定制系统平台.专注于为企业和商家客户提供基于腾讯微信公众平台系统程序和APP等开发服务,中国养老金融50人论坛2 ...

  5. 用js来实现页面的换肤功能(带cookie记忆)

    用js来实现页面的换肤功能 js实现换肤功能的实现主要是通过利用js控制CSS来实现的.大致的实现原理是这样的, 1.先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的D ...

  6. 用Redis作为Mysql数据库的缓存

    看到一篇不错的博文,记录下: http://blog.csdn.net/qtyl1988/article/details/39553339 http://blog.csdn.net/qtyl1988/ ...

  7. Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

    之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...

  8. JSP EL表达式使用

    JSP EL表达式使用: Servlet: package com.stono.servlet; import java.io.IOException; import java.util.HashMa ...

  9. 编写Node.js原生扩展

    Node.js是一个强大的平台,理想状态下一切都都可以用javascript写成.然而,你可能还会用到许多遗留的库和系统,这样的话使用c++编写Node.JS扩展会是一个不错的注意. 以下所有例子的源 ...

  10. SSM框架整合(注解)-Spring+SpringMVC+MyBatis+MySql

    准备工作: 下载整合所需的jar包 点击此处下载 使用MyBatis Generator生成dao接口.映射文件和实体类 如何生成 搭建过程: 先来看一下项目的 目录结构 1.配置dispatcher ...