<!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的更多相关文章

  1. js 实现图片实时预览

    <body> 上传图片: <input type="file" name="file" style="width: 200px; h ...

  2. js实现图片实时预览

    注: 此博客转自 http://www.cnblogs.com/goody9807/p/6064582.html  转载请注明出处 <body> 上传图片: <input type= ...

  3. JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  4. MWeb 1.4 新功能介绍一：引入文件夹到 MWeb 中管理，支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览

    之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...

  5. RunJS推荐用于个人使用（使用方便JS、css实时预览、编辑、管理等功能）

    RunJS,在线编写.展示html.js.css代码,拥有实时预览.分享.Fork.代码高亮.自己主动完毕等多项特性,提供文件上传.多种登录方式. 地址:http://runjs.cn/ waterm ...

  6. node.js平台下，cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  7. cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  8. js实现FileUpload选择图片后预览功能

    当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...

  9. Sublime、Webstorm等在APICloud平台上全面支持WiFi真机同步和实时预览功能

    APICloud工具插件包括APICloud Studio.Sublime Text和Webstorm全面为开发者提供iOS和Android平台真机同步调试功能,不仅可以通过USB方式进行APP真机同 ...

随机推荐

  1. android 分辨率自适应

    1.术语和概念 术语 说明 备注 Screen size(屏幕尺寸) 指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 摩托罗拉milestone手机是3.7英寸 A ...

  2. 《python源代码剖析》笔记 python中的Dict对象

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 1.PyDictObject对象 -->  C++ STL中的map是基于RB-tre ...

  3. android 多项对话框

    在main.xml中 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...

  4. Python3.2官方文档翻译--继承

    6.5 继承 当然,一门语言特性假设不支持继承那么名称类就失去了价值.子类继承父类的方法例如以下: class DerivedClassName(BaseClassName): <stateme ...

  5. 动态从数据库读取菜单（ASP.NET版）

    这几天一直打算做个从数据读取导航菜单的效果,以前做的时候都是写死的(太死了),好了话不多说,先看效果! 我是个小菜,高手请不要喷!我在网上查了好久,说用menu控件,但是我用了不太好!最后我决定用re ...

  6. ComboGrid( 数据表格下拉框)

    一． 加载方式//class 加载方式<select id="box" class="easyui-combogrid" name="dept& ...

  7. Chrome Browser

    set default search engine as follow for force encrypted searching: https://encrypted.google.com/sear ...

  8. django: db - admin

    本讲演示简单使用 Django Admin 功能. 一,修改 settings.py,添加 admin 应用: INSTALLED_APPS = ( 'django.contrib.auth', 'd ...

  9. 打印HTML页面部分区域javascript代码

    function preview(oper) { if (oper < 10) { bdhtml = window.document.body.innerHTML; //获取当前页的html代码 ...

  10. Linux CentOS PhpMyAdmin安装

    安装好PHP,Apache和MySQL程序后,为了管理MySQL数据库,我们需要安装phpMyAdmin程序.下面是关于如何在centos安装phpMyAdmin程序的方法.1.管理员root身份登录 ...