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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>By：DragonDean</title>

 <script type="text/javascript">

 //下面用于图片上传预览功能

 function setImagePreview(avalue) {

     var docObj=document.getElementById("doc");

     var imgObjPreview=document.getElementById("preview");

     //files属性：返回一个 Files 集合，由指定文件夹中包含的所有 File 对象组成，包括设置了隐藏和系统文件属性的文件。

     if(docObj.files &&docObj.files[0]){

         //火狐下，直接设img属性

         imgObjPreview.style.display = 'block';

         imgObjPreview.style.width = '150px';

         imgObjPreview.style.height = '180px';

         //imgObjPreview.src = docObj.files[0].getAsDataURL();

         //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

         imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

     }else{

         //IE下，使用滤镜

         //

         docObj.select();

         var imgSrc = document.selection.createRange().text;

         var localImagId = document.getElementById("localImag");

         //必须设置初始大小

         localImagId.style.width = "150px";

         localImagId.style.height = "180px";

         //图片异常的捕捉，防止用户修改后缀来伪造图片

         try{

         localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

         localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

         }

         catch(e)

         {

         alert("您上传的图片格式不正确，请重新选择!");

         return false;

         }

         imgObjPreview.style.display = 'none';

         document.selection.empty();

     }

     return true;

 }

 </script>

 </head>

 <body>

     <table width="100%" border="0" cellspacing="0" cellpadding="0">

         <tbody>

             <tr>

                 <td height="101" align="center">

                     <div id="localImag">

                         <img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;">

                     </div>

                 </td>

             </tr>

             <tr>

                 <td align="center" style="padding-top:10px;">

                     <input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();">

                 </td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

上传图片预览JS脚本 Input file图片预览的实现示例的更多相关文章

  1. 一段上传图片预览JS脚本,Input file图片预览的实现

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...

  2. js获取 input file 图片缩略图

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

  3. js实现移动端图片预览：手势缩放， 手势拖动，双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  4. js 实现 input file 文件上传

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  5. js清空input file的值

    原文:js清空input file的值 在做选择本地图片上传的功能时遇到一个问题,第一次点file按钮选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,但把创建的img ...

  6. input file 模拟预览图片。

    首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...

  7. 【Js应用实例】图片预览

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. input file 图片上传

    使用第三方:jquery.ajaxfileupload.jsinput中的name根据后端来定 <form method="post" enctype="multi ...

  9. js脚本 将本地图片路径转换为html

    公司业务类似于电商, 因此有很多纯图片展示的商品详情页, 类似淘宝店商品页面下的多个图片组成的商品详情页, 页面很简单, 就是一大串img标签, 但是每次做详情页都要配合emmet一顿操作( 如下图 ...

随机推荐

  1. yield生成器及字符串的格式化

    一.生成器 def ran(): print('Hello world') yield 'F1' print('Hey there!') yield 'F2' print('goodbye') yie ...

  2. 虚函数的使用 以及虚函数与重载的关系, 空虚函数的作用，纯虚函数->抽象类，基类虚析构函数使释放对象更彻底

    为了访问公有派生类的特定成员,可以通过讲基类指针显示转换为派生类指针. 也可以将基类的非静态成员函数定义为虚函数(在函数前加上virtual) #include<iostream> usi ...

  3. Git学习笔记与IntelliJ IDEA整合

    Git学习笔记与IntelliJ IDEA整合 一.Git学习笔记(基于Github) 1.安装和配置Git 下载地址:http://git-scm.com/downloads Git简要使用说明:h ...

  4. 查询EBS中LOV的SQL语句

    1.帮助->关于:查找会话 SID : 507: 2.点一下LOV右边的三点,触发LOV事件: 3.运行如下代码段: DECLARE  l_sid NUMBER := :SID;BEGIN  F ...

  5. D3.js学习（五）

    上一节我们已经学习了如何设置填充区域,其实理解了他的实现原理还是非常简单了.这一节中, 我们主要学习多条曲线的绘制,以及给不同的曲线指定不同的纵坐标. 新的数据 由于我们要画两条曲线,所以我们要在原来 ...

  6. 在Azure虚拟机上安装VNC

    我们知道,Azure提供的linux虚拟机镜像是没有桌面的,是base版的,大多情况下能满足绝大部分工作需要,甚至很多习惯使用命令行的读者,反而用不惯带桌面的linux OS,但是有些情况下,桌面还是 ...

  7. java基础知识（五）java类

    类是java的核心和本质,是java语言的基础. 一.java中的类 1.类class 一个类可以包含局部变量.实例变量.类变量(静态变量) 一个类至少有一个构造方法,如果没有,系统会默认给出一个无参 ...

  8. [原创]CSS3打造动态3D气球

    周末在江边晨跑的时候发现很多 当时心血来潮就想,应该可以在网页中实现一下 这几天得闲就做了一下,效果如下 (尽量在最新版本的chrome或者firefox中查看) demo下载在文章最后 预览 --& ...

  9. 高程（4）：执行环境、作用域、上下文执行过程、垃圾收集、try...catch...

    高程三 4.2.4.3 一.执行环境 1.全局执行环境是最外层的执行环境. 2.每个函数都有自己的执行环境,执行函数时,函数环境就会被推入一个当前环境栈中,执行完毕,栈将其环境弹出,把控制器返回给之前 ...

  10. C# 验证类（使用正则表达式 验证文本框）

    using System; using System.Text.RegularExpressions; namespace SG_VQCDataCollection { /// <summary ...