注: 此博客转自 http://www.cnblogs.com/goody9807/p/6064582.html  转载请注明出处

<body>

    上传图片:   <input type="file" name="file"

                   style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />

    <div id="imgPreview" style="width:120px; height:100px;margin-left: 280px;">

    </div>

</body>

</html>

<script type="text/javascript">

    function PreviewImage(imgFile) {

        var filextension = imgFile.value.substring(imgFile.value.lastIndexOf("."), imgFile.value.length);

        filextension = filextension.toLowerCase();

        if ((filextension != '.jpg') && (filextension != '.gif')  && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) {

            alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");

            imgFile.focus();

        }

        else {

            var path;

            if (document.all)//IE

            {

                imgFile.select();

                path = document.selection.createRange().text;

                document.getElementById("imgPreview").innerHTML = "";

                document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果

            }

            else//FF

            {

                path = window.URL.createObjectURL(imgFile.files[0]);

                document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='" + path + "'/>";

                // document.getElementById("img1").src = path;

            }

        }

    }

</script>

js实现图片实时预览的更多相关文章

  1. js 实现图片实时预览

    <body> 上传图片: <input type="file" name="file" style="width: 200px; h ...

  2. RunJS推荐用于个人使用（使用方便JS、css实时预览、编辑、管理等功能）

    RunJS,在线编写.展示html.js.css代码,拥有实时预览.分享.Fork.代码高亮.自己主动完毕等多项特性,提供文件上传.多种登录方式. 地址:http://runjs.cn/ waterm ...

  3. node.js平台下，cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  4. cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  5. 图片实时预览JSP加js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS上传图片本地实时预览缩略图

    HTML 代码如下 <body> <table width="100%" border="0" cellspacing="0&quo ...

  7. pdf.js实现图片在线预览

    项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...

  8. MWeb 1.4 新功能介绍一：引入文件夹到 MWeb 中管理，支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览

    之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...

  9. JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

随机推荐

  1. JSOI2016R3 瞎BB题解

    题意请看absi大爷的blog http://absi2011.is-programmer.com/posts/200920.html http://absi2011.is-programmer.co ...

  2. 关于SqlHelper

    在 SqlHelper 类中实现的方法包括:   ExecuteNonQuery.此方法用于执行不返回任何行或值的命令.这些命令通常用于执行数据库更新,但也可用于返回存储过程的输出参数.   Exec ...

  3. 重叠I/O模型

    一． 重叠I/O的概念当调用ReadFile和WriteFile时,如果最后一个参数lpOverlapped设置为NULL,那么线程就阻塞在这里,直到读写完指定的数据后,它们才返回.这样在读写大文件的 ...

  4. 与焊接厂交流——从生产角度出发的PCB设计心得

    上周的时候,去了趟加工厂盯电路板的焊接进度.然后在闲余的时候,跟焊接厂的工程师交流了一下,工程师从生产的角度,说了几个值得注意的事项: 1.元件的焊盘应该要窄长,不能过宽.因为,在过机表贴时,焊盘上的 ...

  5. Scala 编程---类和对象

    类是对象的蓝图.一旦你定义了类,你就可以用关键字new从类的蓝图里创建对象.比方说,如果给出了类的定义: class ChecksumAccumulator { // class definition ...

  6. EF快速开发定义数据接口类（转）

    using System; using System.Linq; using System.Linq.Expressions; using System.Data.Objects; namespace ...

  7. Python开发入门与实战19-Windows Azure web 应用部署

    19. 微软云web应用部署 上一章节我们介绍了如何实现在微软云通过虚拟机部署我们的在python django应用,本章我们来介绍如何Windows Azure上部署通过部署网站的方式来部署我们的应 ...

  8. iOS中AutoLayer自动布局流程及相关方法

    关于UIView的Layer,IOS提供了三个方法: 1.layoutSubviews 在iOS5.1和之前的版本,此方法的缺省实现不会做任何事情(实现为空),iOS5.1之后(iOS6开始)的版本, ...

  9. setNeedsDisplay，setNeedsLayout

    UIView的setNeedsDisplay和setNeedsLayout方法.首先两个方法都是异步执行的.setNeedsDisplay会调用自动调用drawRect方法,这样可以拿到UIGraph ...

  10. c++程序员必知的几个库

    c++程序员必知的几个库 1.C++各大有名库的介绍——C++标准库 2.C++各大有名库的介绍——准标准库Boost 3.C++各大有名库的介绍——GUI 4.C++各大有名库的介绍——网络通信 5 ...