图片按钮来代替文件上传控件(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 ...
随机推荐
- 几种常用的JS类定义方法
几种常用的JS类定义方法 // 方法1 对象直接量var obj1 = { v1 : "", get_v1 : function() { return ...
- 全浏览器收藏网站javascript
function MyFavorite(sURL, sTitle) { var ctrl = (navigator.userAgent.toLowerCase()).indexOf('mac') != ...
- About_MySQL Select--来自copy_03
MySQL Select 查询分类 单表查询:简单查询 多表查询:连接查询 联合查询:多个查询结果汇总 查询的组成 投影查询:挑选要显示的字段 select array1,array2,... f ...
- bootstrap如何给.list-group加上序号
在bootstrap中,我们可以使用不带任何class的<ol>跟<li>来创建一个有序列表,但是如果加上list-group类,样式有了,但列表前面的数字却没了. Boots ...
- CSS的class、id、css文件名的常用命名规则
CSS的class.id.css文件名的常用命名规则 (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer ...
- hdu 2102 BFS
原题链接 思路:bfs搜一发 AC代码: #include "map" #include "queue" #include "math.h" ...
- Displaying a full list of groups in Odoo's Kanban view
Kanban view is probably the most flexible view in Odoo. It can be used for many different purposes. ...
- UIDynamic(物理仿真)
简介 什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认为是一种物理引擎,能模拟和仿真现实生活中的物理现象 如: 重力.弹性碰撞等现象 物理引 ...
- ajaxfileupload.js
jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' ...
- Mysql的一些常用命令
Mysql基本操作 创建表: create table test01_02(id varchar(50) not null auto_increment primary key, name nvarc ...