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. windows7 sqlserver2012 无法写入受保护的内存 解决办法

    1.我服务器  是windows server 2008R2  装的是MSSQLSERVER2012 2.客户端开发是MSSQLSERVER2012 Windows7 遇到问题: 解决办法: 卸载迅雷 ...

  2. 如何快速学会android的四大基础----Service篇

    很多人都以为,只要学过一点java就可以马上写android应用了,这种想法的产生非常自然,因为现在网上有那么多的android开源实例,只要跟着来,也能够自己写一个播放器.但是,只有去写一个真正投入 ...

  3. process credentials(三)

    主要内容包括: 1.进程描述符中Realtime Mutex相关数据结构的初始化 2.子进程如何复制父进程的credentials 3.per-task delay accounting的处理 4.子 ...

  4. es5 温故而知新 简单继承示例

    // 矩形(构造器/父类) function Rectangle (height, width) { this.height = height; this.width = width; } // 获取 ...

  5. uefi+GPT分区安装ubuntu[zz]

    现状:1.预装win8的笔记本几乎都是uefi启动模式,配合GPT磁盘分区,于是遇到了“麻烦”不会装了,或者说按照老教程安装,结果失败了.而且有很多人在问怎么解决,其实网上就有嘛,关键词就是“uefi ...

  6. 使用Talend Open Studio将数据分步从oracle导入到hive中

    先使用Tos建立模型,将Oracle中的数据导入到本地: build job后,形成独立可以运行的程序: 将生成的zip文件,上传到hadoop集群上,有hive环境的机器上: [hive@h1 wo ...

  7. Spring Security教程(五):自定义过滤器从数据库从获取资源信息

    在之前的几篇security教程中,资源和所对应的权限都是在xml中进行配置的,也就在http标签中配置intercept-url,试想要是配置的对象不多,那还好,但是平常实际开发中都往往是非常多的资 ...

  8. mac 下搭建 php + apache + mysql 服务器(cool)

    之前做.net 网站.后转ios .所有很少接触windows 啦.但有时候自己还真需要个测试的服务器环境.干脆把自己电脑搞成服务器得了 下面贴上链接: Apache+PHP+Mysql OS X 1 ...

  9. [svc]jdk+tomcat部署.jforum论坛部署

    安装jdk和tomcat jdk1.7.0_13(系列)下载url 我这里用的最新的jdk. 去官网下载即可 cd /usr/local/src/ tar xf jdk-8u162-linux-x64 ...

  10. python常用运维脚本实例

    转载  file是一个类,使用file('file_name', 'r+')这种方式打开文件,返回一个file对象,以写模式打开文件不存在则会被创建.但是更推荐使用内置函数open()来打开一个文件 ...