<!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. JAVA WEB项目中各种路径的获取

    JAVA WEB项目中各种路径的获取 标签: java webpath文件路径 2014-02-14 15:04 1746人阅读 评论(0) 收藏 举报  分类: JAVA开发(41)  1.可以在s ...

  2. Event Loop个人理解

    javascript引擎单线程程序,其执行同步操作会按顺序向下执行,执行异步操作则使用事件循环模型. js引擎线程遇到异步操作,会将异步操作交给对应的观察者, 异步操作包括: dom事件 click, ...

  3. 更换域名后的数据库sql的执行命令

    原来域名为trz.lqzcw.com 更改成 www.trzbearing.com UPDATE wp_options SET option_value = replace(option_value, ...

  4. Java国际化（i18n）

    Java国际化(i18n) 最近在做一个网站国际化的功能.用Java做开发,使用spring+velocity. Java提供了对i18n的支持,spring对其做了集成,可以很方便的配置.主要思想就 ...

  5. U盘容量变小解决办法

    之前买了个三星闪盘,容量32G,USB3.0 后来装了U盘系统Kali Linux,最近想用的时候发现容量变为6GB了,真的很奇怪. 于是万能的百度(别说为什么不用谷歌,防火墙呀...) 找到解决办法 ...

  6. MAC OS升级到10.11(OS X EICAPTION)之后CocoaPods不能正常使用的问题解决

    昨晚回家之后开始升级系统到10.11,下载了一整个晚上之后终于在早上下载完毕,早上带到公司,想查一个第三方库的时候却遇到了问题: guoyufudeMacBook-Pro:~ GuoYufu$ pod ...

  7. win7系统下python安装numpy，matplotlib，scipy和scikit-learn

    1.安装numpy,matplotlib,scipy和scikit-learn win7系统下直接采用pip或者下载源文件进行安装numpy,matplotlib,scipy时会遇到各种问题,这是因为 ...

  8. mysql SQL优化之嵌套查询-遁地龙卷风

    (-1) 写在前面 这篇随笔的数据使用的是http://blog.csdn.net/friendan/article/details/8072668#comments里的,里面有一些常见的select ...

  9. yii2——自定义widget

    参考资料:http://www.bsourcecode.com/yiiframework2/how-to-create-custom-widget-in-yii2-0-framework/   如何使 ...

  10. MySql: 常见sql语句

    1. show create table mysql> show create table t \G*************************** 1. row ************ ...