jsp代码

<div class="form-group" id="caseIma">
<label class="control-label">案例图片</label>
<label class="btn btn-primary">选择图片
<input type="file" style="display: none" class="form-control" id="caseImage" name="caseImage"
onchange="viewImage(this)"/>
</label>
!--<p class="help-block">建议尺寸88*88</p>-->
</div>
<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" />
</div>

js代码

//上传图片后预览图片
function viewImage(file){
var preview = document.getElementById('preview');
if(file.files && file.files[0]){
//火狐下
preview.style.display = "block";
preview.style.width = "300px";
preview.style.height = "120px";
preview.src = window.URL.createObjectURL(file.files[0]);
}else{
//ie下,使用滤镜
file.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "250px";
localImagId.style.height = "200px";
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
locem("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}catch(e){
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
preview.style.display = 'none';
document.selection.empty();
}
return true;
}

jsp上传图片实时显示的更多相关文章

  1. 基于Jquery插件Uploadify实现实时显示进度条上传图片

    网址:http://www.jb51.net/article/83811.htm     这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...

  2. [Swift通天遁地]四、网络和线程-(9)上传图片并实时显示上传进度

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. 使用Uploadify实现上传图片生成缩略图例子,实时显示进度条

    不了解Uploadify的,先看看前一篇详细说明 http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html Uploadify ...

  4. jsp实时显示后台批处理进度 - out分块,简单的长连接方式

    这两天在实现一个批处理操作,但是想让前台实时显示后台批处理进度,本想着用复杂一些的框架可以实现异步信息调用 但是鉴于是内部管理系统,且只有一两个人用到这个功能,所以做了一个简单的长连接方式的实时响应 ...

  5. vue中使用axios post上传头像/图片并实时显示到页面

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码:   <div id="myPhoto ...

  6. thinkPHP利用ajax异步上传图片并显示、删除

    近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...

  7. Javaweb项目页面实时显示后台处理结果

    http://www.cnblogs.com/dong-xu/p/6701271.html 此博文甚好,项目参照博主代码可实现. 前端页面: <%@ page language="ja ...

  8. 实时显示内容(Thread+Handler)

    class LocThread extends Thread{ @Override public void run() { while (true){ try { Thread.sleep(99); ...

  9. 基于MATLAB的GUI(Graphical User Interface)音频实时显示设计

    摘要:本文章的设计主要讲基于matlab的gui音频实时显示设计,此次设计的gui相当于一个简洁的音乐播放器,界面只有”录音“和”播放“两个控件,哈哈,够简洁吧.通过”录音“按钮可以实现声音从电脑的声 ...

随机推荐

  1. UI篇(初识君面)

    我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...

  2. json相关类库,java对象与json相互转换

    有效选择七个关于Java的JSON开源类库 转自:http://www.open-open.com/lib/view/open1397870197828.html 翻译: (英语原文:http://w ...

  3. [Erlang 0127] Term sharing in Erlang/OTP 上篇

    之前,在 [Erlang 0126] 我们读过的Erlang论文 提到过下面这篇论文: On Preserving Term Sharing in the Erlang Virtual Machine ...

  4. MySQL优化一例

    DELIMITER $$ USE `xxx`$$ DROP FUNCTION IF EXISTS `F_getBuluDates`$$ CREATE DEFINER=`root`@`localhost ...

  5. shell脚本俄罗斯方块游戏

    亲自测试了一个大牛写的shell脚本,感兴趣可以看看,效果如下:

  6. Visual Studio Emulator for Android 初体验

    Visual Studio Emulator for Android已经推出一段时间了,但一直没有用过.前两天下载安装用了下,整体感觉比谷歌自带的模拟器强多了.Visual Studio Emulat ...

  7. 使用maven给spring项目打可直接运行的jar包(配置文件内置外置的打法)

    从网上看过许多打jar包的例子,大多是将配置文件打进jar包的.经过本人一番研究,终于搞清楚了怎样将jar包的配置文件外置. 废话不说,直接上spring的pom.xml的配置文件. <proj ...

  8. PHP加密技术

    一.MD5加密 直接干,这里以一个登录页面为例: <?php require_once 'config/database.config.php'; $act=$_REQUEST['act']; ...

  9. PS切图(一)

    Photoshop界面设置 新建文件Ctrl+N,其中[预设]-[web],[宽度]-[1920],高度不定.[背景内容]-[透明],也可存储为预设. 移动设置(V) 建议不勾选[自动选择],选择[图 ...

  10. 【python之路1】python安装与环境变量配置

    直接搜索 Python,进入官网,找到下载,根据个人电脑操作系统下载相应的软件.小编的是windows os .下载python-2.7.9.msi 安装包  双击安装程序,进入安装步骤.在安装过程中 ...