图片按钮来代替文件上传控件（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