图片按钮来代替文件上传控件(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
图片按钮来代替文件上传控件(Freemaker,JQuery,HTML,CSS,JavaScript)的更多相关文章
- jquery文件上传控件 Uploadify
(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- jquery文件上传控件 Uploadify 问题记录
Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...
- ***文件上传控件bootstrap-fileinput的使用和参数配置说明
特别注意: 引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...
- jquery文件上传控件 Uploadify 可以和ajax交互
http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- jquery文件上传控件 Uploadify(转)
原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上 ...
- 使用Uploadify(UploadiFive)多文件上传控件遇到的坑
最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...
- 在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件(转)
引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过“我现在可以通过WebBr ...
- 对FileUpload文件上传控件的一些使用方法说明
//创建时间:2014-03-12 //创建人:幽林孤狼 //说明:FileUpload文件上传控件使用说明(只是部分)已共享学习为主 //可以上传图片,txt文档.doc,wps,还有音频文件,视屏 ...
- 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法
今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...
随机推荐
- The beatles-Yesterday
轉載自https://www.youtube.com/watch?v=XNnaxGFO18o Yesterday Lyrics:Paul Mccartney Music:Paul Mccartney ...
- linux文件创建、查看、编辑命令
一.创建文件命令 1.touch命令 linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存在的文件.touch [-acm][-r ref ...
- 关于webdriver中弹出框的定位
对于webdriver中弹出框的定位,需要引入这个包: import org.openqa.selenium.Alert; 具体语句为: Alert alert= driver.switchTo(). ...
- Maven dependency spring-web vs spring-webmvc
<dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmv ...
- jquery .post .get中文参数乱码解决方法详解
jquery默认的编码为utf-8,做项目时有时处于项目需要用到ajax提交中文参数,乱码问题就很头疼了,折腾了许久终于弄出来了.为了便于传输,我们首先将需要用到的参数用javascript自带的函数 ...
- POJ 2838 单调队列
Sliding Window Time Limit: 12000MS Memory Limit: 65536K Total Submissions: 55309 Accepted: 15911 ...
- Spring 定时器
<!-- 对定时任务进行引用 --> <bean id="schedulerFactory" class="org.springframework.sc ...
- php数组序列化serialize与unserialize
$arr=array('1','2','3');echo serialize($arr); //序列化 a:3:{i:0;s:1:"1";i:1;s:1:"2" ...
- javascript 原型链
浅谈JS原型链 原型链 ECMAScript中描述了原型链的概念.我们知道ECMAScript并不像C++,Java那样使用类,但是对象仍然可以通过多种方式创建,其中就有构造函数方式.每个构造函数都有 ...
- php使用strlen()判断中文汉字字符串长度
php使用strlen()判断中文汉字字符串长度 对于含有中文情况,此时可以采用: iconv_strlen($str,"UTF-8"); iconv_strlen 是无论是何种编 ...