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