图片实时预览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真机同 ...
随机推荐
- parcel write boolean值
http://stackoverflow.com/questions/6201311/how-to-read-write-a-boolean-when-implementing-the-parcela ...
- Linux Resin 安装配置
Resin是一个非常流行的application server,对servlet和JSP提供了良好的支持,性能优良,resin自身采用Java语言开发.Resin Pro版本支持缓存和负载均衡,收费最 ...
- Linux下配置免安装版Tomcat
一.下载免安装版Tomcat 打开Tomcat主页http://tomcat.apache.org/,下载Tomcat免安装版,我这里下载的是apache-tomcat-7.0.2.tar.gz. 二 ...
- [ES6] WeakMap vs Map
WeakMap: is a type of Map where only objects can be passed as keys. Primitive data type -- such are ...
- Qt使用AES加密算法对字符串进行加密
因工作需要,需要对字符串进行加密处理,在网上找了很长时间,终于找到了一个可以使用的aes加密算法.其源代码采用c++编写而成,但其头文件引用windows.h,经过修改部分代码,将#inc ...
- 显示目录树命令tree
-a:显示所有文件,包括隐藏文件 -d:只显示目录 -f:显示完整的文件名,包含路径 -L:显示目录树的深度 [root@rusky /]# tree -L -a -f /home /home |-- ...
- easyui-form添加自定义表单验证
easyui自定义表单验证规则其实不是很复杂,只要重写一下重写 $.fn.validatebox.defaults.rules 自定义示例 $.extend($.fn.validatebox.defa ...
- 动态更新UI的方式
1. TimerTask 和 timer连用: 这里主要是实现倒计时, TimerTask 里面有方法runOnUiThread,在这个方法里面调用timer cancel()停止倒计时,同样更新UI ...
- 解析c语言背后的汇编代码
源码 很简单的c语言代码,作用是交换两个数: #include <stdio.h> void swap(int * a, int * b) { *a = *a + *b - (*b = * ...
- kvc/kvo复习
kvc/kvo复习 1 小问题 '[<XMGPerson 0x7fb8a8f30220> setValue:forUndefinedKey:]: this XMGPerson * pers ...