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)的更多相关文章

  1. jquery文件上传控件 Uploadify

    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  2. jquery文件上传控件 Uploadify 问题记录

    Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...

  3. ***文件上传控件bootstrap-fileinput的使用和参数配置说明

    特别注意:    引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...

  4. jquery文件上传控件 Uploadify 可以和ajax交互

    http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html  原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  5. jquery文件上传控件 Uploadify(转)

    原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上 ...

  6. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑

    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...

  7. 在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件(转)

    引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过“我现在可以通过WebBr ...

  8. 对FileUpload文件上传控件的一些使用方法说明

    //创建时间:2014-03-12 //创建人:幽林孤狼 //说明:FileUpload文件上传控件使用说明(只是部分)已共享学习为主 //可以上传图片,txt文档.doc,wps,还有音频文件,视屏 ...

  9. 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法

    今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...

随机推荐

  1. C/C++:[2]enum-枚举量声明、定义和使用

    C/C++:[2]enum-枚举量声明.定义和使用 转自:http://jingyan.baidu.com/article/e75aca85526c1b142edac6d9.html 众所周知,C/C ...

  2. python成长之路——第一天

    一.python版本间的差异: 1.1:2.x与3.x版本对比 version 2.x 3.x print print " "或者print()打印都可以正常输出 只能print( ...

  3. sql分页代码

    //三种sql分页语句 SELECT TOP 分页尺寸 * FROM ( SELECT ROW_NUMBER() OVER (ORDER BY id) AS RowNumber,* FROM Blob ...

  4. IE6及以上版本fixed问题解决方案,页面右下角固定页面,可以最大化、最小化、正规显示

    在窗口固定位置显示内容使用fixed,但是 IE 6 不支持,后来我搜了很多方法,都没有作用,后来类比着一个网站的代码,使用absolute .z-index解决了问题. 页面div结构: <d ...

  5. js 遮罩层 loading 效果

    //调用方法 //关闭事件<button onclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来 //调用LayerSho ...

  6. js判断移动端系统

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  7. [CareerCup] 17.11 Rand7 and Rand5 随机生成数字

    17.11 Implement a method rand7() given rand5(). That is, given a method that generates a random numb ...

  8. hdu Is It A Tree?

    判定给定的边序列是否过程一棵树.我用到的判定方法是:第一步:判定  边数是否等于顶点数-1  第二:判定是否只有一个根节点  .当然还要考虑是否为空树的情况. 但是代码交上去,好几遍都是Runtime ...

  9. 常用SQLPLUS工具命令

    有两个   EMPNO ENAME          SAL的列标题 满   14行   为一个标题行 列行重叠了 虽然上述是修改了 linesize 的值,但是仍然没有改变 登录框的宽度,下面是修改 ...

  10. 【iCore3 双核心板_ uC/OS-III】例程十一:任务消息队列

    实验指导书及代码包下载: http://pan.baidu.com/s/1pLQYiE3 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...