1、jsp代码

            <div class="inputBox">
<span id="tu" <c:if test="${pd == null || pd.CACHET == '' || pd.CACHET == null}">style="display: none;"</c:if>>
<img id="img" src="<%=basePath%>uploadFiles/carousel/${pd.CACHET}" width="210"/>
</span>
<input type="button" class="update" id="yyzz" value="上传" onclick="$('#YYZZFBSMJ').click();">
<input type="file" name="YYZZFBSMJ" id="YYZZFBSMJ" style="display: none;" onchange="fileType(this)">
</div>

2、js代码:

//过滤类型
function fileType(obj){
var fileType=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
if(fileType != '.gif' && fileType != '.png' && fileType != '.jpg' && fileType != '.jpeg'){
$(obj).tips({
side:3,
msg:'请上传图片格式的文件',
bg:'#AE81FF',
time:3
});
$(obj).val('');
}else{
var reader = new FileReader();
reader.readAsDataURL(obj.files[0]);
reader.onload = function (e) {
$("#img").attr("src",this.result);
}
$("#tu").show();
}
}

button上传替换file上传按钮,并显示图片缩略图,纯jsp操作的更多相关文章

  1. input上传文件显示图片缩略图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. PHP结合Ueditor并修改图片上传路径 微信小程序 拼接域名显示图片

    前言 在使用UEditor编辑器时,一般我们都是需要修改默认的图片上传路径的,下面是我整理好的修改位置和方法供大家参考. 操作 Ueditor PHP版本本身自带了一套上传程序,我们可以在此基础中,找 ...

  3. file按钮美化成图片(纯HTML+CSS)

    效果图: 代码实现: html: <div> <h2>上传头像</h2> <p class="fs18">(请上传200X200px ...

  4. 第二十八篇、自定义的UITableViewCell上有图片需要显示,要求网络网络状态为WiFi时,显示图片高清图;网络状态为蜂窝移动网络时,显示图片缩略图

    1)SDWebImage会自动帮助开发者缓存图片(包括内存缓存,沙盒缓存),所以我们需要设置用户在WiFi环境下下载的高清图,下次在蜂窝网络状态下打开应用也应显示高清图,而不是去下载缩略图. 2)许多 ...

  5. IOS开发-UI学习-根据URL显示图片,下载图片的练习(button,textfield,image view,url,data)

    编写一个如下界面,实现: 1.在文本输入框中输入一个网址,然后点击显示图片,图片显示到UIImageView中. 2.点击下载,这张显示的图片被下载到手机的Documents文件夹下的Dowmload ...

  6. python 之 前端开发(form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签)

    11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. input type=file 上传文件样式美化(转载)

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

  8. 改变文件上传input file类型的外观

    当我们使用文件上传功能时,<input type="file">,但是外观有点不符合口味,如何解决这个问题? <input type="file&quo ...

  9. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

随机推荐

  1. 【SqlServer】SqlServer中Alter语句的使用

    在修改Sql Server表结构时,常用到Alter语句,把一些常用的alter语句列举如下. 1:向表中添加字段 Alter table [表名] add [列名] 类型 2:  删除字段 Alte ...

  2. Python学习笔记009—函数

    1. 空函数 如果想定义一个什么事也不做的空函数,可以用pass语句: def nop(): pass pass语句什么都不做,那有什么用?实际上pass可以用来作为占位符,比如现在还没想好怎么写函数 ...

  3. MongoDB学习笔记(3)--删除数据库

    MongoDB 删除数据库 语法 MongoDB 删除数据库的语法格式如下: db.dropDatabase() 删除当前数据库,默认为 test,你可以使用 db 命令查看当前数据库名. 实例 以下 ...

  4. android 蓝牙编程重点---如何发送和接收16进制数据

    最近的android蓝牙开发项目也逐渐接近尾声,基本的功能都已经完成,只剩下界面的设计.现在真的是舒了一口气! 作为编程学习经验只有1年的菜鸟,这是我独自完成的商业性产品,而且还是涉及到与单片机蓝牙模 ...

  5. mysqld Can’t start server : Bind on unix socket: Permission denied

    启动mysql报错: mysqld Can’t start server : Bind on unix socket: Permission denied 原因: mysql.sock无法建立,权限问 ...

  6. 自定义View之圆形水波扩散动效

    这个效果做出来以后,真的美极了!放在你的应用中,无疑增添了光彩! 效果图    其实,第一种效果,才是产品的需求要的效果.第三种效果,是不是很熟悉?支付宝的咻一咻!哈哈,无意中,我就写出来了. 实现步 ...

  7. 【转】我为什么离开 Cornell

    我为什么离开 Cornell 很多人都知道,我曾经在 Cornell 博士就读,两年之后转学到了 Indiana 大学.几乎所有人,包括 Indiana 大学的人都感觉奇怪,为什么会有人从 Corne ...

  8. ext2文件系统 - mke2fs

      上一遍博文的重点其实将ext2整体的组织框架,我们知道了ext2文件系统由块组组成,每个块组里面的组织形式.我们甚至直接把超级块和组描述符里面的内容,用十六进制形式展现了出来.这篇博文主要讲述如何 ...

  9. android中碰撞屏幕边界反弹问题

    其实碰撞问题只是涉及到一点小算法而已,但在实际应用,尤其游戏中有可能会遇到,下面给出一个小示例,代码如下: MainActivity: package com.lovo; import android ...

  10. 比较@Resource、@Autowired

    @Resource @Resource默认按byName自动注入.既不指定name属性,也不指定type属性,则自动按byName方式进行查找.如果没有找到符合的bean,则回退为一个原始类型进行进行 ...