jsp上传图片实时显示
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上传图片实时显示的更多相关文章
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...
- [Swift通天遁地]四、网络和线程-(9)上传图片并实时显示上传进度
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 使用Uploadify实现上传图片生成缩略图例子,实时显示进度条
不了解Uploadify的,先看看前一篇详细说明 http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html Uploadify ...
- jsp实时显示后台批处理进度 - out分块,简单的长连接方式
这两天在实现一个批处理操作,但是想让前台实时显示后台批处理进度,本想着用复杂一些的框架可以实现异步信息调用 但是鉴于是内部管理系统,且只有一两个人用到这个功能,所以做了一个简单的长连接方式的实时响应 ...
- vue中使用axios post上传头像/图片并实时显示到页面
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto ...
- thinkPHP利用ajax异步上传图片并显示、删除
近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...
- Javaweb项目页面实时显示后台处理结果
http://www.cnblogs.com/dong-xu/p/6701271.html 此博文甚好,项目参照博主代码可实现. 前端页面: <%@ page language="ja ...
- 实时显示内容(Thread+Handler)
class LocThread extends Thread{ @Override public void run() { while (true){ try { Thread.sleep(99); ...
- 基于MATLAB的GUI(Graphical User Interface)音频实时显示设计
摘要:本文章的设计主要讲基于matlab的gui音频实时显示设计,此次设计的gui相当于一个简洁的音乐播放器,界面只有”录音“和”播放“两个控件,哈哈,够简洁吧.通过”录音“按钮可以实现声音从电脑的声 ...
随机推荐
- Java面试基础概念总结
面向对象软件开发的优点有哪些? 答:开发模块化,更易维护和修改:代码之间可以复用:增强代码的可靠性.灵活性和可理解性. 多态的定义? 答:多态是编程语言给不同的底层数据类型做相同的接口展示的一种能力. ...
- 遍历map的四种方法
方法一 在for-each循环中使用entries来遍历这是最常见的并且在大多数情况下也是最可取的遍历方式.在键值都需要时使用.注意:for-each循环在Java 5中被引入所以该方法只能应用于j ...
- 菜鸟快飞之JavaScript函数
1.复制变量值 在说函数前,我觉得需要先说说关于变量值的复制,以便后面的理解. 复制基本类型的值: 当一个变量复制另外一个值为基本类型的变量时,两个变量可以参与任何操作而不会互相影响 var num1 ...
- NodeJs端口被占用的情况
在NodeJs运行的时候,我们往往会遇到一个问题:“端口被占用”,这个问题,我们的处理办法有哪些呢? 这里我只介绍一下linux下的方法: 1.使用nodeme(忘记是不是这个啦,回去查下,这个要安装 ...
- 针对JS经典题型对全局变量及局部变量的理解浅谈
第一次写博,还蛮激动... 看到了三题经典题型,就我目前的认识对此题进行总结.如有错误,敬请指正 首先,我们先明确一下JS引擎的工作步骤: js引擎工作分为两步: 1.将这个js中的变量和函数声明保存 ...
- 中国式商业智能报表ActiveReports免费公开课,10月20日开讲
ActiveReports公开课全方位报表解决方案,满足商业报表五大需求 [开课时间]10月20日[主讲老师]葡萄城报表产品经理[开课形式]网络在线公开课[活动费用]前50名免费 适合人群:报表开发人 ...
- Spring:ApplicationContext (2)
在使用Spring时,通常会配置一个applictioncontext.xml 来指定ApplicationContext的相关信息. 当使用SpringMVC时,还会再另外指定一个[server-n ...
- jquery 元素控制(追加元素/追加内容)
参考网址:http://www.jquerycn.cn/a_5521 一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: ...
- WPF 自定义CheckBox样式
自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...
- Surface在C++层的创建源码解析
Surface在C++层的创建源码解析 源码为:android4.4.4 1.创建SurfaceComposerClient绘图客户端 // create a client to surfacefli ...