input上传按钮的优化
在使用input标签按钮的时候,<input type="file" value="" />
显示很难看,怎么办?
使用label
<li class="ware-list mt10">
<span class="vel-tit">上传文件:</span>
<input class="inputText fix file_up" value="" type="text">
<input id ="up_file" onchange="change(event)" class="inputText fix" value="" type="file" style="display:none">
<label for="up_file"><div class="btn-primary" style="float:left;height:34px;line-height:34px" >上传文件</div></label>
</li> <li class="ware-list mt10">
<span class="vel-tit">上传图标:</span>
<label for="up_img">
<div style="float:left;"><img ms-duplex="icon" ms-attr-src="{{icon}}"></div>
</label>
<input id ="up_img" onchange="upimg(event)" class="inputText fix" value="" type="file" style="display:none">
<label for="up_img"><div class="btn-primary" style="float:left;height:34px;line-height:34px" >添加图片</div></label> </li>
在上传文件的地方:我将上传input标签隐藏,将上传按钮label到input标签上,点击上传按钮的时候,其实质是在点击input[file]按钮
input上传按钮的优化的更多相关文章
- 上传按钮样式优化 <input type="file" />
<html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...
- input上传按钮美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- input上传按钮 文字修改办法
解决思路是把input 放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件的上传. 具体代码: <style> #uploadImg{ font-size ...
- input[type=file] 样式美化,input上传按钮美化
<style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...
- 一个漂亮的上传按钮input[type=file]
;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...
- input美化上传按钮美化
今天工作需求碰到 样式改变上传按钮 效果: <a href="javascript:;" class="a-upload"> <input t ...
- JQuery上传插件uploadify优化
旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...
- webuploader的一个页面多个上传按钮实例
借鉴一位大佬的demo 附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览 直接上传图片后拿到回传地址给img标签显示图 ...
随机推荐
- 自定义FutureTask实现
FutureTask FutureTask是Future的实现,用来异步任务的获取结果,可以启动和取消异步任务,查询异步任务是否计算结束以及获取最终的异步任务的结果.通过get()方法来获取异步任务的 ...
- JAVA MQ API方式通信采用Binding MQ Server方式
package com.mqapi; /** * @modified by actorai E-mail:actorai@163.com * @version 创建时间:2010-9-15 * ...
- spring架构解析--入门一
Spring 框架中的核心组件只有三个:Core.Context 和 Beans.它们构建起了整个 Spring 的骨骼架构.简单理解: spring core是工具,context是环境,而bean ...
- 高速开车换底盘记:Windows 与 Linux 部署都抗住了,但修车任务艰巨
抱歉,又是一篇流水账,在排查问题的焦头烂额中写博客的确是一个挑战,望大家见谅. 今天园友溪源More发了一篇博文博客园翻车启示录,而翻车之后的最新进展是——昨天下午我们又把 .net core 引擎的 ...
- ZooKeeper系列(二)—— Zookeeper 单机环境和集群环境搭建
一.单机环境搭建 1.1 下载 下载对应版本 Zookeeper,这里我下载的版本 3.4.14.官方下载地址:https://archive.apache.org/dist/zookeeper/ # ...
- js高程3--面向对象的程序设计--创建对象
创建对象 这是js高程3--第6章面向对象的程序设计--第二节创建对象的总结与自己的理解,每一种模式都有自己的优点与缺点,搞清楚它们出现的历史原因,优缺点,我们才能使用的更加游刃有余! 本片文章并没有 ...
- 解决OneNote同步出错
问题: onenote同步出现黄色叹号. 解决: 分析: 对每个分区进行设置密码,不能设置的证明该分区有问题.(可能不只一个分区卡同步) 解决方法: 1,将有问题的分区分制一份,然后删掉原来的分区 2 ...
- JSP引擎、JSP容器、Web服务器
JSP引擎与JSP容器指的都是同一样的东西,他们都是用来同一管理和运行Web引用程序的“软件”.常见的JSP引擎有Tomcat.JRun.Resin 广义上来说,JSP引擎是用来管理和运行Web应用程 ...
- nodeJS 中mongoose操作分页
开始前先聊聊五毛钱的: 好久没写了,可能是因为懒(哎),写这个是好事,既帮助了自己,巩固一下知识,也可以让别人给自己纠错纠错,三月份接触到了node,先是跟着一些教程写了一些小实例,感觉自己就喜欢上了 ...
- Linux--shell的awk--10
一.awk介绍 全称:由Aho Weinberger Kernaighan三个人的首字母组合而成 1970年第一次出现在Unix机器上,后来在开源领域使用它 awk是一种单独的编程语言解释器 awk报 ...