图片实时预览JSP加js
<!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;
}
function clearxx(){
document.getElementById("preview").src="";
}
</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();">
<input type="button" name="xx" id="tijiao" value="清除" onclick="clearxx();">
</td>
</tr>
</tbody>
</table>
</body>
</html>
图片实时预览JSP加js的更多相关文章
- js 实现图片实时预览
<body> 上传图片: <input type="file" name="file" style="width: 200px; h ...
- js实现图片实时预览
注: 此博客转自 http://www.cnblogs.com/goody9807/p/6064582.html 转载请注明出处 <body> 上传图片: <input type= ...
- JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- MWeb 1.4 新功能介绍一：引入文件夹到 MWeb 中管理，支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览
之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...
- RunJS推荐用于个人使用（使用方便JS、css实时预览、编辑、管理等功能）
RunJS,在线编写.展示html.js.css代码,拥有实时预览.分享.Fork.代码高亮.自己主动完毕等多项特性,提供文件上传.多种登录方式. 地址:http://runjs.cn/ waterm ...
- node.js平台下，cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
- cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
- js实现FileUpload选择图片后预览功能
当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...
- Sublime、Webstorm等在APICloud平台上全面支持WiFi真机同步和实时预览功能
APICloud工具插件包括APICloud Studio.Sublime Text和Webstorm全面为开发者提供iOS和Android平台真机同步调试功能,不仅可以通过USB方式进行APP真机同 ...
随机推荐
- Fatal signal 11 (SIGSEGV) at 0xdeadbaad (code=1) 错误 解决方案(android-ndk)
在android里做ndk编程的时候,碰到个随机性错误 错误信息如下: 05-06 15:59:44.411: A/libc(3347): Fatal signal 11 (SIGSEGV) at 0 ...
- EA+svn实现UML的版本号控制
一.安装软件 1.VisualSvn Server svnserver 2.Tortoise Svn svnclient 3.Slik-Subversion-1.7.8-x64版本号控制插件 4.En ...
- 实现Android 版网页快照功能
现在一般的购物网站,在你完成交易后都会将页面拍照以免日后发生商务纠纷,而对于我们移动开发者这个传统互联网上的优秀经验也同样给了我们一些设计上的启迪,接下来我将几种实现思路写出来供大家参考. 方案一:使 ...
- ini文件解析c库(iniparser)
一.交叉编译ini解析库 1.官方网站http://ndevilla.free.fr/iniparser 下载iniparser-3.1.tar.gz 2.解压 tar -zxvf iniparser ...
- 如何使用easyUI
一.简介 以下内容来自百度: jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的 目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不 ...
- linux stat命令
在Linux中,文件没有“创建时间”这个说法.Linux中的文件的时间属性只有三个:atime(Access time).mtime(Modified time).ctime(Change time) ...
- 小学生之KTV播放原理
第一步: 创建一个Song类 //歌曲名称 public string SongName { get; set; } //歌曲路劲 public string SongPath { get; set ...
- InstallShield常用prq文件的下载地址
VC 2010 redist X86: http://saturn.installshield.com/is/prerequisites/microsoft visual c++ 2010 redis ...
- Kinect研究
1. 深度照相机 红外 + 2个摄像头. (1彩色摄像头,1红外发射,1接收) 红外捕捉深度. 2. OpenNI 某编程社区创建. 提供基本深度数据的访问.LGPL协议. 用户跟踪付费. 3. 问题 ...
- DG下手工处理v$archive_gap方法
从9i以后,oracle dataguard 备库一般都不需要手工处理丢失的日志,FAL自动会帮我们处理,下面通过个案例来讲下手工处理丢失的日志的方法: 1.在备库查询有哪些日志丢失,没应用到备库 S ...