图片实时预览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真机同 ...
随机推荐
- [转]Android访问网络，使用HttpURLConnection还是HttpClient
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/12452307 最近在研究Volley框架的源码,发现它在HTTP请求的使用上比较有 ...
- .NET基本权限管理框架源代码
有兴趣的朋友欢迎加群讨论:312677516 1.菜单导航管理 2.操作按钮 3.角色管理 4.部门管理 5.用户管理(用户权限) 6.用户组管理(设置成员,用户组权限) 7.系统配置(动态配置系统参 ...
- java 多态，和方法覆盖分析（转）
多态 (Polymorphism) 大家应该都不陌生,它是我们开发面向对象系统的“老朋友”了 .但是老朋友也会有“烦心”的时候啊,呵呵.有时候 不注意,还真会被它难到.譬如下面这个例子(thank H ...
- Android 基于Netty的消息推送方案之字符串的接收和发送（三）
在上一篇文章中<Android 基于Netty的消息推送方案之概念和工作原理(二)> ,我们介绍过一些关于Netty的概念和工作原理的内容,今天我们先来介绍一个叫做ChannelBuffe ...
- Python 正则表达试
字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在.比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样做不但麻烦, ...
- Linux修改SSH连接数 重启SSH服务
系统 linux,增加SSH终端连接数最大为1000个 解决方案: vi /etc/ssh/sshd_config 输入/MaxStartups 定位到如下并修改 1) #MaxStar ...
- Facebook登录 AndroidStudio
简介 主页:https://www.facebook.com/ Android开发者支持:https://developers.facebook.com/docs/android/ 应用管理:htt ...
- CentOS6.5 PHP基础环境搭建 [个人整理-亲测可用]
** * CentOS6.5 搭建基础PHP环境(yum安装) * http://www.aiplaypc.com/160.html ** #安装需要的包,有依赖关系,自动帮你解决 yum ins ...
- 读书笔记_Effective_C++_条款二十三：宁以non-member、non-friend替换member函数
有下面一种情况 class A { private: int a; int b; public: A(int x, int y) :a(x), b(y){} void a_display(){ cou ...
- win7下安装搭建PHP环境
由于最近新找的工作要求php,所以在电脑上安装搭建了PHP环境.主要参考了这篇文章http://www.leapsoul.cn/?p=695(之前第一次搭建时由于版本问题没有弄好) 1.先装apach ...