<!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");

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>

　　

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. Linux和开源已经在2013年开始悄悄主宰世界?

    提到Linux，很多人觉得它依旧不温不火，实际上在这个即将过去的一年，Linux和开源软件已经悄悄主宰了计算领域的各方面，这具体表现在开源项目遍地、Chromebook崛起、SteamOS备受瞩目、A ...

  2. Linux下Redis开机自启（Centos）

    废话少说,直接来步骤: 1.设置redis.conf中daemonize为yes,确保守护进程开启. 2.编写开机自启动脚本 vi /etc/init.d/redis 脚本内容如下: # chkcon ...

  3. Servlet分页技术

    这是看韩顺平老师的servlet视频,自己动手写的,楼主看韩顺平老师的servlet是2006制作的,用的是sql server数据库,自己又用的是oracle数据库,所以怕有的同学遇到同样的问题,不 ...

  4. 以纯面向对象的JS编写最基本的数据字典案例

    之前有讲到过数据字典,什么是数据字典,用来干啥的,这个不细说了,今天来说说如何实现数据字典功能 无非就是维护数据字典,对数据字典对象进行增删改成,曾经我写过一个页面跳转形式的,十分简单,不说了,今天用 ...

  5. AC日记——简单密码 openjudge 1.7 10

    10:简单密码 总时间限制:  1000ms 内存限制:  65536kB 描述 Julius Caesar曾经使用过一种很简单的密码.对于明文中的每个字符,将它用它字母表中后5位对应的字符来代替,这 ...

  6. AS开发者转LAYA一周心得

    LAYA太神奇了,你可以完全不会H5,会AS3就能开发出H5游戏

  7. SQL 2008 windows登录失败,错误18456, 更正

    可能的原因:密码有效性验证失败.该密码太短,不符合 Windows 策略要求. 本地设置可能被域设置覆盖.而域设置中指定了安全策略,密码必须有一定的复杂性.重新更改sa密码. 第一步.以windows ...

  8. iOS远程推送1

    一.APNS 远程推送 1.所有的苹果设备,在联网状态下,都会与苹果服务器建立长连接. 2.长连接:就是只要联网了,就一直建立连接. 3.长连接的作用:时间校准,系统升级,查找我的iPhone. 4. ...

  9. android 混淆文件proguard.cfg详解

    -optimizationpasses 5  [代码压缩级别]-dontusemixedcaseclassnames [混淆时不会产生形形色色的类名 ]-dontskipnonpubliclibrar ...

  10. usb驱动开发14之设备生命线

    直接看代码吧. /*-------------------------------------------------------------------*/ /** * usb_submit_urb ...