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

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; 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

您的资助是我最大的动力!
金额随意,欢迎来赏!

如果,您认为阅读这篇博客让您有些收获,不妨点击一下右下角的推荐按钮。
如果,您希望更容易地发现我的新博客,不妨点击一下绿色通道的关注我

如果,想给予我更多的鼓励,求打

欢迎大家关注我的个人博客 Lycos | 小站 !由于最近没时间处理,原域名http://www.liuyuchuan.com暂时停止使用

原文地址:https://www.cnblogs.com/yuchuan/p/2016_03_22_css.html