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. 几种常用的JS类定义方法

    几种常用的JS类定义方法   // 方法1 对象直接量var obj1 = {    v1 : "",    get_v1 : function() {        return ...

  2. 全浏览器收藏网站javascript

    function MyFavorite(sURL, sTitle) { var ctrl = (navigator.userAgent.toLowerCase()).indexOf('mac') != ...

  3. About_MySQL Select--来自copy_03

    MySQL Select   查询分类 单表查询:简单查询 多表查询:连接查询 联合查询:多个查询结果汇总 查询的组成 投影查询:挑选要显示的字段 select array1,array2,... f ...

  4. bootstrap如何给.list-group加上序号

    在bootstrap中,我们可以使用不带任何class的<ol>跟<li>来创建一个有序列表,但是如果加上list-group类,样式有了,但列表前面的数字却没了. Boots ...

  5. CSS的class、id、css文件名的常用命名规则

    CSS的class.id.css文件名的常用命名规则        (一)常用的CSS命名规则 头:header       内容:content/container       尾:footer   ...

  6. hdu 2102 BFS

    原题链接 思路:bfs搜一发 AC代码: #include "map" #include "queue" #include "math.h" ...

  7. Displaying a full list of groups in Odoo's Kanban view

    Kanban view is probably the most flexible view in Odoo. It can be used for many different purposes. ...

  8. UIDynamic(物理仿真)

    简介 什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认为是一种物理引擎,能模拟和仿真现实生活中的物理现象 如: 重力.弹性碰撞等现象 物理引 ...

  9. ajaxfileupload.js

    jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' ...

  10. Mysql的一些常用命令

    Mysql基本操作 创建表: create table test01_02(id varchar(50) not null auto_increment primary key, name nvarc ...