图片按钮来代替文件上传控件(Freemaker,JQuery,HTML,CSS,JavaScript)
CSS样式:
<style type="text/css">
.fileInputContainer{
height:70px;
width:95px;
position:relative;
} .fileInput{
height:70px;
width:95px;
position:absolute;
right:0;
top:0;
opacity: 0;
filter:alpha(opacity=0);
cursor:pointer;
}
</style>
JavaScript:
此处JS使用JQuery自定义图片Ajax处理
HTML:
<div class="div img">
<ul class="fl">
<li class="i1">
<div id="divImg" class="fileInputContainer" style="" >
<img id="img" style="height:70px; width:95px;" src="<#if img??>图片地址<else>默认图片地址URL</#if>" />
<input id="imgPath" name="imgPath" value="展示''}" type="hidden" class="fileInput" />
<input id="ImgShow" name="files" type="file" class="fileInput" />
</div>
</li>
<li class="i2 blue font16 ">展示图片</li>
</ul>
<ul>
... ...
</ul>
</div>
借鉴这位博友:
http://www.cnblogs.com/wangkongming/archive/2013/04/09/3010615.html
图片按钮来代替文件上传控件(Freemaker,JQuery,HTML,CSS,JavaScript)的更多相关文章
- jquery文件上传控件 Uploadify
(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- jquery文件上传控件 Uploadify 问题记录
Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...
- ***文件上传控件bootstrap-fileinput的使用和参数配置说明
特别注意: 引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...
- jquery文件上传控件 Uploadify 可以和ajax交互
http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- jquery文件上传控件 Uploadify(转)
原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上 ...
- 使用Uploadify(UploadiFive)多文件上传控件遇到的坑
最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...
- 在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件(转)
引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过“我现在可以通过WebBr ...
- 对FileUpload文件上传控件的一些使用方法说明
//创建时间:2014-03-12 //创建人:幽林孤狼 //说明:FileUpload文件上传控件使用说明(只是部分)已共享学习为主 //可以上传图片,txt文档.doc,wps,还有音频文件,视屏 ...
- 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法
今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...
随机推荐
- java分享第四天(循环)
While循环: while(Boolean_expression){ //statements } 在执行时,如果布尔表达式的结果为真,则循环中的动作将被执行,这将继续下去,只要该表达式的结果为真 ...
- Linux下安装JDK和tomcat
1.新建用户 2.解压 jdk-7u67-linux-x64.tar.gz 到本地 3.配置环境变量 编辑.bash_profile文件 4.生效 5.安装tomcat 6.验证tomcat是否安装成 ...
- android api汇集
参考文章: 知乎-想写个 App 练手,有什么有趣的 API 接口推荐吗? 使用 Espresso 和 Dagger 测试网络服务 http://developer.simsimi.com/apps# ...
- $.ajax用法与举例
下面是一段比较常用到的 $.ajax 方法: $.ajax({ type:'GET', url:'http://www.phpernote.com/jquery.php', data:{usernam ...
- HDU1058 DP
Humble Numbers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- JS(javascript) 将网站加入收藏夹
| 浏览:688 | 更新:2014-09-20 19:39 1 2 3 分步阅读 将网站网址加入收藏夹,方便下次访问! 工具/原料 网址: 电脑. 方法/步骤 //创建加入收藏夹JS函数 < ...
- remove 清除binlog
#!/bin/bash DATACFG=/etc/my.cnf DATADIR=`awk /^datadir/ $DATACFG|awk -F"=" '{print $2}'` D ...
- hdu1201-18岁生日
Gardon的18岁生日就要到了,他当然很开心,可是他突然想到一个问题,是不是每个人从出生开始,到达18岁生日时所经过的天数都是一样的呢?似乎并不全都是这样,所以他想请你帮忙计算一下他和他的几个朋友从 ...
- mysql分区及实例演示
一.为什么要分区? 需求:大数据.解决方案:分而治之,更细一点即为.将大表和大索引分为一个更小的操作单元 在mysql中,分区允许将表.索引和索引编排表细分为更小的单元.分区后,每个分区有自己单独的名 ...
- IOS第八天(6:UITableViewController新浪微博, 模型和 控件位置封装一起statusFrame)
*****HMViewController #import "HMViewController.h" #import "HMStatus.h" #import ...