<!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. WordPress酷炫CSS3读者墙代码

    前几日在大前端看到他站点中最新的CSS3读者墙代码,一看效果绚丽的不得鸟,立刻就开始研究了,多次研究未果,可终究是研究出来了,昨天刚成功,今天啊和童鞋来我站说读者墙头像显示不对,我一看,还真是,头像都 ...

  2. 移动开发框架剖析(二) Hammer专业的手势控制

    浏览器底层并没有给元素提供类似,单击,双击,滑动,拖动这些直接可以用的控制接口,一切的手势动作都只能通过模拟出来.移动端浏览器唯一给我们提供的就只是mousedown -> mousemove ...

  3. 【转】MySQL性能优化的最佳21条经验

    文章转自: http://blog.csdn.net/waferleo/article/details/7179009 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关 ...

  4. spring实例化bean的三种方式

    公共使用的实体

  5. Format 函数示例

    Format 函数示例本示例显示用 Format 函数做格式化输出的不同用法.对于日期分隔号(/),时间分隔号(:),以及 AM/ PM 等文本而言,其真正的显示格式会因计算机上的国际标准不同而有所差 ...

  6. Java性能调优之：idea变慢解决

    今天搬砖的时候遇到一个问题,idea总是卡死,完全无法愉快的玩耍.幸好机器是Linux系统的.于是通过以下方式解决了问题: 通过top命令,查看系统运行状态发现4个CPU中有1个CPU用户占用率为10 ...

  7. C# I/O

    获取运行时的动态目录 private static string GetDataDir_Data() { var parent = Directory.GetParent(Directory.GetC ...

  8. Total Hamming Distance

    The Hamming distance between two integers is the number of positions at which the corresponding bits ...

  9. [PHP][REDIS]phpredis 'RedisException' with message 'read error on connection'

    最近一个后台常驻job通过redis的brpop阻塞读取消息时,设置了永不超时 while( $re=$redis->brPop($queue_name,0) ){ } 但是在实际的使用中发现很 ...

  10. Ansible Ubuntu 安装部署

    一.安装: $ sudo apt-get install ansible 二.配置: a.基本配置 $ cd /etc/ansible/ $ sudo cp hosts hosts_back 备份一个 ...