图片按钮来代替文件上传控件(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 ...
随机推荐
- C/C++:[2]enum-枚举量声明、定义和使用
C/C++:[2]enum-枚举量声明.定义和使用 转自:http://jingyan.baidu.com/article/e75aca85526c1b142edac6d9.html 众所周知,C/C ...
- python成长之路——第一天
一.python版本间的差异: 1.1:2.x与3.x版本对比 version 2.x 3.x print print " "或者print()打印都可以正常输出 只能print( ...
- sql分页代码
//三种sql分页语句 SELECT TOP 分页尺寸 * FROM ( SELECT ROW_NUMBER() OVER (ORDER BY id) AS RowNumber,* FROM Blob ...
- IE6及以上版本fixed问题解决方案,页面右下角固定页面,可以最大化、最小化、正规显示
在窗口固定位置显示内容使用fixed,但是 IE 6 不支持,后来我搜了很多方法,都没有作用,后来类比着一个网站的代码,使用absolute .z-index解决了问题. 页面div结构: <d ...
- js 遮罩层 loading 效果
//调用方法 //关闭事件<button onclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来 //调用LayerSho ...
- js判断移动端系统
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- [CareerCup] 17.11 Rand7 and Rand5 随机生成数字
17.11 Implement a method rand7() given rand5(). That is, given a method that generates a random numb ...
- hdu Is It A Tree?
判定给定的边序列是否过程一棵树.我用到的判定方法是:第一步:判定 边数是否等于顶点数-1 第二:判定是否只有一个根节点 .当然还要考虑是否为空树的情况. 但是代码交上去,好几遍都是Runtime ...
- 常用SQLPLUS工具命令
有两个 EMPNO ENAME SAL的列标题 满 14行 为一个标题行 列行重叠了 虽然上述是修改了 linesize 的值,但是仍然没有改变 登录框的宽度,下面是修改 ...
- 【iCore3 双核心板_ uC/OS-III】例程十一:任务消息队列
实验指导书及代码包下载: http://pan.baidu.com/s/1pLQYiE3 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...