button上传替换file上传按钮,并显示图片缩略图,纯jsp操作
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操作的更多相关文章
- input上传文件显示图片缩略图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- PHP结合Ueditor并修改图片上传路径 微信小程序 拼接域名显示图片
前言 在使用UEditor编辑器时,一般我们都是需要修改默认的图片上传路径的,下面是我整理好的修改位置和方法供大家参考. 操作 Ueditor PHP版本本身自带了一套上传程序,我们可以在此基础中,找 ...
- file按钮美化成图片(纯HTML+CSS)
效果图: 代码实现: html: <div> <h2>上传头像</h2> <p class="fs18">(请上传200X200px ...
- 第二十八篇、自定义的UITableViewCell上有图片需要显示,要求网络网络状态为WiFi时,显示图片高清图;网络状态为蜂窝移动网络时,显示图片缩略图
1)SDWebImage会自动帮助开发者缓存图片(包括内存缓存,沙盒缓存),所以我们需要设置用户在WiFi环境下下载的高清图,下次在蜂窝网络状态下打开应用也应显示高清图,而不是去下载缩略图. 2)许多 ...
- IOS开发-UI学习-根据URL显示图片,下载图片的练习(button,textfield,image view,url,data)
编写一个如下界面,实现: 1.在文本输入框中输入一个网址,然后点击显示图片,图片显示到UIImageView中. 2.点击下载,这张显示的图片被下载到手机的Documents文件夹下的Dowmload ...
- python 之 前端开发(form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签)
11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- input type=file 上传文件样式美化(转载)
input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...
- 改变文件上传input file类型的外观
当我们使用文件上传功能时,<input type="file">,但是外观有点不符合口味,如何解决这个问题? <input type="file&quo ...
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
随机推荐
- Java8 lambda表达式10个示例
Java 8 刚于几周前发布,日期是2014年3月18日,这次开创性的发布在Java社区引发了不少讨论,并让大家感到激动.特性之一便是随同发布的lambda表达式,它将允许我们将行为传到函数里.在Ja ...
- Block(一)基础-b
一.概述 Block是C级别的语法和运行时特性.Block比较类似C函数,但是Block比之C函数,其灵活性体现在栈内存.堆内存的引用,我们甚至可以将一个Block作为参数传给其他的函数或者Block ...
- Android APK安装完成自动删除安装包
需要实现此功能,一般实际开发是在自动版本更新上,当更新完开始自动安装完毕后,删除内存卡里的安装包.实现方式很简单,监听应用广播,获取内存卡下的文件,删除! 1.监听广播 package com.exa ...
- 在ToolStrip中加入具有更好体验性的DateTimePicker
一. 需求的产生 很多时候,需要根据年月或日期来检索数据.在我的数据库中,如果只需要以月为单位,我一般按照200801这样的格式(yyyyMM)保存为int类型.在做数据检索时,是根据工具栏 ...
- 如何在Linux平台下安装JDK
原文链接:http://android.eoe.cn/topic/android_sdk 1.下载Java的开发包JDK: JDK有好几个类型版本,我们只需要选择Java SE类型的版本就行了. 进入 ...
- ConEmu配置task的脚本
1.Bash::Msys2-64 set CHERE_INVOKING= & set .exe -new_console:p %ConEmuDrive%\msys64\usr\bin\bash ...
- 牛腩记账本core版本源码
很简单的一个记账本项目,无非就是数据库的增删查改,采用vs2017 + asp.net core + mysql + dapper + layui, 其中访问mysql数据库用的是dapper, 界面 ...
- eclipse再见,android studio 新手新手教程(一)基本设置
写在前面: 作为一个刚半仅仅脚踏入android开发的新手,在使用eclipse开发了两个自我感觉不甚成熟的商城类app之后.遇到了一些问题,总结为例如以下: 1,代码复用性. findviewByI ...
- zabbix rpm 安装 新增zabbix yum 源 并更新
需要安装的包: # rpm -qa|grep zabbix zabbix-server-2.4.3-1.el6.x86_64 zabbix-web-mysql-2.4.3-1.el6.noarch z ...
- zabbix 实现 iptables 监控
安装iptstate # yum install iptstate 配置zabbix key iptables.conf # cat /etc/zabbix/zabbix_agentd.d/iptab ...