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

  1. <body>
  2.     上传图片:   <input type="file" name="file"
  3.                    style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />
  4.     <div id="imgPreview" style="width:120px; height:100px;margin-left: 280px;">
  5.     </div>
  6. </body>
  7. </html>
  8. <script type="text/javascript">
  9.     function PreviewImage(imgFile) {
  10.         var filextension = imgFile.value.substring(imgFile.value.lastIndexOf("."), imgFile.value.length);
  11.         filextension = filextension.toLowerCase();
  12.         if ((filextension != '.jpg') && (filextension != '.gif')  && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) {
  13.             alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
  14.             imgFile.focus();
  15.         }
  16.         else {
  17.             var path;
  18.             if (document.all)//IE
  19.             {
  20.                 imgFile.select();
  21.                 path = document.selection.createRange().text;
  22.  
  23.                 document.getElementById("imgPreview").innerHTML = "";
  24.                 document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果
  25.             }
  26.             else//FF
  27.             {
  28.                 path = window.URL.createObjectURL(imgFile.files[0]);
  29.                 document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='" + path + "'/>";
  30.                 // document.getElementById("img1").src = path;
  31.             }
  32.         }
  33.     }
  34. </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. Linux Mint 17使用小结

    用过蛮多的linux系统 linux mint是我比较喜欢和常用的一个系统,装的是linux mint xfce 64位版本,在这里记录使用中遇到的一些问题及解决的方法,备忘,方便以后查看. 1.首先 ...

  2. <java基础学习>01环境变量配置

    安装完JDK开始配置系统环境变量,在path变量里面添加java的bin目录 方法二: 配置完成后 在命令下输入javac查看是否配置成功 第一个java程序 hello world! class H ...

  3. Ubuntu 修改hosts

    Ubuntu系统的Hosts只需修改/etc/hosts文件,在目录中还有一个hosts.conf文件,刚开始还以为只需要修改这个就可以了,结果发现是需要修改hosts.修改完之后要重启网络.具体过程 ...

  4. Bootstrap<基础二十七> 多媒体对象（Media Object）

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  5. tab事件优化-事件代理

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

  6. Java系列笔记(2) - Java RTTI和反射机制

    目录 前言 传统的RTTI 反射 反射的实现方式 反射的性能 反射与设计模式 前言 并不是所有的Class都能在编译时明确,因此在某些情况下需要在运行时再发现和确定类型信息(比如:基于构建编程,),这 ...

  7. 设计模式（2）--单例模式（Singleton Pattern）

    概述 一个类能返回对象一个引用(永远是同一个)和一个获得该实例的方法(必须是静态方法,通常使用getInstance这个名称):当我们调用这个方法时,如果类持有的引用不为空就返回这个引用,如果类保持的 ...

  8. 如何在HTML5 Canvas 里面显示 Font Awesome 图标

        Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用. 提供的CSS 已经可以完美显示这些图标在网页里面.最新的版本4.3 里面,已经提供519 Icon ...

  9. Fix the iOS code signing issue when using Jenkins

    This week I setup the Jenkins on my Mac and try to build iOS applications. unfortunately I got the c ...

  10. Android TelephonyManager电话管理器

    今天介绍一下Android的电话管理器--TelephonyManager,TelephonyManager管理手机通话状态.电话网络信息的服务类,获取TelephonyManager: Teleph ...