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相当于一个简洁的音乐播放器,界面只有”录音“和”播放“两个控件,哈哈,够简洁吧.通过”录音“按钮可以实现声音从电脑的声 ...
随机推荐
- linux的基本语法及一些设置
rm -r note.txt //delete网络配置进入 vi /etc/sysconfig/network-scripts/ifcfg-teh0修改配置DEVICE=eth0BOOTPROTO=d ...
- Httpster –世界各地最潮的网页设计案例聚合网站
Httpster 这个网站聚合了世界各地最新最潮的网页设计案例,展示了创意的设计,精心的策划,优秀的排版.这些作品都按月份和类别进行了很好划分,你可以方便的找到自己感兴趣的网站案例. 立即去看看 您可 ...
- Three.js制作360度全景图
这是个基于three.js的插件,预览地址:戳这里 使用方法: 1.这个插件的用法很简单,引入如下2个js <script src="js/three.min.js"> ...
- 原生JS实战:写了个一边玩游戏,一边记JS的API的游戏
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...
- jQuery orbit 幻灯片
在线实例 默认 带缩略图 带描述 使用方法 <div class="wrap" style="width: 565px; height: 290px; margin ...
- MapFile生成WMS
MAP NAME "HBWMS" STATUS ON SIZE 800 600 EXTENT 107.795 28.559 116.977 33.627 UNITS ME ...
- iOS - 捕获应用程序崩溃日志
作为一名iOS移动应用开发者,为了确保你的应用程序正确无误,在将应用程序提交到应用商店之前,你必定会进行大量的测试工作:而且在你测试的过程中应用程序运行的很好,但是在应用商店上线之后,还是有用户抱怨应 ...
- 我厂 WiFi SDK 开源了, 直接开源 WiFi 万能钥匙核心功能,造福中小开发者
官方地址: http://global.18wifibank.com/ github: https://github.com/yibawifi/wifisdk
- 多War项目中静态文件的共享方案
[原创申明:文章为原创,欢迎非盈利性转载,但转载必须注明来源] 在互联网产品中,一般会有多个项目(Jar.WAR)组成一个产品线.这些WAR项目,因为使用相同的前端架构(jQuery.easyui等) ...
- Tensorflow 官方版教程中文版
2015年11月9日,Google发布人工智能系统TensorFlow并宣布开源,同日,极客学院组织在线TensorFlow中文文档翻译.一个月后,30章文档全部翻译校对完成,上线并提供电子书下载,该 ...