1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>By：DragonDean</title>
  6. <script type="text/javascript">
  7. //下面用于图片上传预览功能
  8. function setImagePreview(avalue) {
  9. var docObj=document.getElementById("doc");
  10.  
  11. var imgObjPreview=document.getElementById("preview");
  12. if(docObj.files &&docObj.files[0])
  13. {
  14. //火狐下，直接设img属性
  15. imgObjPreview.style.display = 'block';
  16. imgObjPreview.style.width = '150px';
  17. imgObjPreview.style.height = '180px';
  18. //imgObjPreview.src = docObj.files[0].getAsDataURL();
  19.  
  20. //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
  21. imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
  22. }
  23. else
  24. {
  25. //IE下，使用滤镜
  26. docObj.select();
  27. var imgSrc = document.selection.createRange().text;
  28. var localImagId = document.getElementById("localImag");
  29. //必须设置初始大小
  30. localImagId.style.width = "150px";
  31. localImagId.style.height = "180px";
  32. //图片异常的捕捉，防止用户修改后缀来伪造图片
  33. try{
  34. localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
  35. localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
  36. }
  37. catch(e)
  38. {
  39. alert("您上传的图片格式不正确，请重新选择!");
  40. return false;
  41. }
  42. imgObjPreview.style.display = 'none';
  43. document.selection.empty();
  44. }
  45. return true;
  46. }
  47.  
  48. </script>
  49. </head>
  50.  
  51. <body>
  52. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  53. <tbody>
  54. <tr>
  55. <td height="101" align="center">
  56. <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>
  57. </td>
  58. </tr>
  59. <tr>
  60. <td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
  61. </tr>
  62. </tbody>
  63. </table>
  64. </body>
  65. </html>

　　

html+js实现图片预览的更多相关文章

  1. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  2. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  3. js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

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

  4. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  6. JS实现图片预览与等比缩放

    案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...

  7. 浅谈js本地图片预览

    最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...

  8. js实现图片预览

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. Jquery OR Js 实现图片预览

    Jquery方法一: <!DOCTYPE html> <html> <head>     <title></title>     <s ...

  10. JavaScript进阶(八)JS实现图片预览并导入服务器功能

    JS实现导入文件功能       赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!(PS:此篇博文是自己在午饭时间所写,为此没吃午饭,这就是程序猿 ...

随机推荐

  1. emacs 新手笔记（二） —— 分割窗格 (split window)

    初极狭,才通人.复行数十步,豁然开朗.—— 陶渊明·桃花源记 ilocker:关注 Android 安全(新入行,0基础) QQ: 2597294287 使用 split-window-xxx 函数可 ...

  2. CTO和技术副总裁应该如何分工？谁才是技术领导者？

    谁是初创公司的技术领导者,是CTO还是技术副总裁?任何在创业公司工作的人都知道,我们不应该去问这个问题.因为这两个是非常不同的角色,角色本身会随着创业公司的发展而变化,两者对于业务规模都很重要. 简单 ...

  3. Struts2中的Unable to load configuration错误的分析与解决方法

    当我们遇到 Unable to load configuration. 这样的错误时,可以根据具体的错误提示找出错误的原因. Unable to load configuration. - inter ...

  4. POJ3494Largest Submatrix of All 1’s[单调栈]

    Largest Submatrix of All 1’s Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 5883   Ac ...

  5. POJ3083Catch That Cow[BFS]

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 77420   Accepted: 24457 ...

  6. Java注解的使用

    概念:java提供了一种原程序中的元素关联任何信息和任何元数据的途径和方法. Java中的常见注解 JDK自带注解: @Override//覆盖父类的方法 @Deprecated//表示方法过时了 @ ...

  7. windows下使用 linux命令好办法

    1. 安装下载 CygwinPortable一键安装包.7z 2. 把安装路径下/  [D:\cygwinportable\CygwinPortable\App\Cygwin\bin] 加到 Path ...

  8. web框架学习列表

    转载自鲁塔弗的博客,原文网址:http://lutaf.com/148.htm web framework层出不穷,特别是ruby/python,各有10+个,php/java也是一大堆 根据我自己的 ...

  9. Struts2动态方法调用（DMI）

    当structs.xml解析到Action的时候,默认执行的是此action的execute()方法,但是实际开发中,我们的action中含有很多方法,比如说增删改查的方法,那么structs.xml ...

  10. P3384 【模板】树链剖分

    P3384 [模板]树链剖分 题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节 ...