图片实时预览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学习【Android内核编译流程和错误笔记】
博客:http://blog.csdn.net/muyang_ren Ubuntu14.04 LTS(要求是64位长期支持版LTS) Jdk1.8 内核:android4.0 一:jdk 1.解压jd ...
- 程序员实用的 MySQL sql 语句
这儿只讲究实用, 程序员编程时常用到的 MySQL的 sql语句(不包括基本的 select, update, delete 等语句). 1. 添加一个用户build,并赋予所有权限的命令 gran ...
- IIS无法启动问题的解决
IIS无法启动,显示“服务并未即使响应启动或控制请求”,我用两种办法都没有解决:1.把IIS卸载重装也不行:2.到服务中world wide web publishing服务也不能启动,提示127错误 ...
- android View各属性详解
一.有8个直接子类:AnalogClock, ImageView, KeyboardView, ProgressBar, SurfaceView, TextView, ViewGroup, ViewS ...
- passwd的使用
名称:passwd 使用权限:所有使用者 使用方式:passwd [-k] [-l] [-u [-f]] [-d] [-S] [username] 说明:用来更改使用者的密码 参数: -k keep ...
- django: template - built-in tags
本节介绍模板中的内置标签:if for 承上文,修改 views.py 如下: from django.shortcuts import render_to_response class Person ...
- js中this的指向
在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1. ...
- Jenkins学习之——(2)插件的安装
本章节将讲解如何安装jenkins的插件. 其实jenkins本身不具有任何集成的功能,而是依靠众多的插件实现功能.就像eclipse一样,期本身只是一个编辑器,而当你安装了其他的第三方插件后,就能实 ...
- 基于live555的一个简单RTSP服务器
1,编译live555源码目录下的 BasicUsageEnvironment.groupsock.liveMedia.UsageEnvironment四个工程生成相应的库文件: 目录结构如下: 2, ...
- OpenCV——改变图像大小
, , int interpolation=INTER_LINEAR ) dsize与fx和fy必须不能同时为零,也就是说要么dsize不为零而fx与fy同时可以为0,要么dsize为0而fx与fy不 ...