废话不说  直接上代码

<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. ExcelUtil

    package cn.com.jansh.core.util; import org.apache.poi.hssf.usermodel.HSSFCell; import org.apache.poi ...

  2. 环信 之 iOS 客户端集成四：集成UI 之 会话列表

    1. 初始化 EaseConversationListViewController *chatListVC = [[EaseConversationListViewController alloc] ...

  3. YII 1.0 发表文章用到的小物件

    <?php $form = $this->beginWidget('CActiveForm',array('htmlOptions'=>array('enctype'=>'mu ...

  4. 常见JS挂马方法及如何防止网站被黑客挂马？

    最近有朋友说自己的网站平时并未作弊,文章也都是原创的,更新很稳定.可不知道为什么网站突然就被各大搜索引擎降权了,一直找不到原因.最后发现是网站被挂马了,导致网站被连累了.在此,借助马海祥博客的平台,给 ...

  5. windows10 subsystem(bash) 如何使用jupter notebook

    按照传统惯例,应该映射端口jupyter notebook --port=15000,然后用浏览器开http://localhost:15000/ 但是当你运行python的时候,居然发现kernel ...

  6. 【原创】梵高油画用深度卷积神经网络迭代十万次是什么效果？ A neural style of convolutional neural networks

    作为一个脱离了低级趣味的码农,春节假期闲来无事,决定做一些有意思的事情打发时间,碰巧看到这篇论文: A neural style of convolutional neural networks,译作 ...

  7. Git学习之路（4）- 撤销操作、删除文件和恢复文件

    ▓▓▓▓▓▓ 大致介绍 经过前面的学习(小白学Git)已经建立了版本库,并上传了文件,这次来学习对这些文件进行基本的操作,即: ◆ 撤销操作 ◆ 删除文件 ◆ 恢复文件 我在此之前,已经将三个文件提交 ...

  8. IOS学习之block代码块

    前言: block这个名词对于做一般开发者来说可能会觉得稀奇古怪而非常陌生,但是对于iOS工程师来说,在整个开发中到处都是它的影子,今天一大早觉得在假期学习一下它,对明年的iOS开发工作做个准备,突然 ...

  9. shell编程其实真的很简单（三）

    通过前两篇文章,我们掌握了shell的一些基本写法和变量的使用,以及基本数据类型的运算.那么,本次就将要学习shell的结构化命令了,也就是我们其它编程语言中的条件选择语句及循环语句. 不过,在学习s ...

  10. C#下控制台程序窗口下启用快速编辑模式运行线程会阻止线程运行

    最近做一个小的功能,使用C#控制台程序开启一个线程进行无限循环没5秒处理一次程序,发现控制台窗口在开启快速编辑模式情况下,进行选择程序打印 出来的文字后发现线程不走了,将快速编辑模式去除后,线程就不会 ...