<!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. 【译】使用 CocoaPods 模块化iOS应用

    原文翻译自:Using CocoaPods to Modularize a Big iOS App 为你的移动应用选择正确的架构是一件相当大的事情,这会对你的工作流程造成影响,陷入面对的问题,可能是一 ...

  2. python 类定义 继承

    0 前言 系统:win7 64bit IDE : python(x,y) 2.7.6.1 IDE集成的解释器:Python 2.7.6 (default, Nov 10 2013, 19:24:18) ...

  3. Android之卫星菜单的实现

    卫星菜单是现在一个非常受欢迎的“控件”,很多Android程序员都趋之若鹜,预览如下图.传统的卫星菜单是用Animation实现的,需要大量的代码,而且算法极多,一不小心就要通宵Debug.本帖贴出用 ...

  4. [Hadoop] Hadoop学习历程 [持续更新中…]

    1. Hadoop FS Shell Hadoop之所以可以实现分布式计算,主要的原因之一是因为其背后的分布式文件系统(HDFS).所以,对于Hadoop的文件操作需要有一套全新的shell指令来完成 ...

  5. [IOS]JSPatch

    用途 修复线上出现的紧急crash,热更新 例子 demo 原理解读 在程序didFinishLaunch时候执行,[JPEngine startEngine], startEngine做了对解析js ...

  6. runtime理论知识

    http://southpeak.github.io/2014/10/25/objective-c-runtime-1/ 转载http://www.jianshu.com/p/6b905584f536 ...

  7. 微软KinectV2深度传感器在Ubuntu上的配置和使用

    最新博客地址已转到: http://blog.csdn.net/zzlyw?viewmode=contents   ------------------------------------------ ...

  8. cacti汇总流量图-将数据合并后作图

    在使用Cacti方便快捷的建立监控图时,往往根据实际应用必须监控几台甚至上百台服务器的汇总流量图来观察该应用服务器组的总流量等指标. 这里我们就来介绍如何用cacit快速的建立汇总流量图,其他汇总图建 ...

  9. Mongo基础使用，以及在Express项目中使用Mongoose

    MongoDB的基本使用 MongoDB特点: 使用BSON存储数据 支持相对丰富的查询操作(相对其他nosql数据库) 支持索引 副本集(支持多个实例/多个服务器运行同个数据库) 分片(数据库水平扩 ...

  10. 文件权限：普通(r、w、x)和特殊(s、t)

     linux中,常常涉及到权限的问题.文件的权限有3组,owner,group,other,每一组都有rwx三种设置.r(4):可读:w(2):可写:x(1):可执行.我们在执行shell命令ls - ...