在使用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上传按钮的优化的更多相关文章

  1. 上传按钮样式优化 <input type="file" />

    <html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...

  2. input上传按钮美化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  4. input上传按钮 文字修改办法

    解决思路是把input 放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件的上传. 具体代码: <style> #uploadImg{ font-size ...

  5. input[type=file] 样式美化,input上传按钮美化

    <style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...

  6. 一个漂亮的上传按钮input[type=file]

    ;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...

  7. input美化上传按钮美化

    今天工作需求碰到 样式改变上传按钮 效果: <a href="javascript:;" class="a-upload"> <input t ...

  8. JQuery上传插件uploadify优化

    旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...

  9. webuploader的一个页面多个上传按钮实例

    借鉴一位大佬的demo  附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览  直接上传图片后拿到回传地址给img标签显示图 ...

随机推荐

  1. 闯荡Ext-第一篇

    今天在网上找到了一本非常好的书:<Ext江湖>,这本书是由大漠穷秋大神写的,刚看到这本书的时候,心里面的那个激动劲啊,本来原先的时候心里面就一直念叨着想要学习Ext,但是苦于找不到好的资料 ...

  2. 【Java例题】6.2 日期类的使用

    2.日期类的使用.显示今天的年月日.时分秒和毫秒数.显示今天是星期几.是今年内的第几天.显示本月共几天,今年是不是闰年.显示两个日期的差,包括年月日.时分秒和毫秒差值. package chapter ...

  3. python3学习-Queue模块

    python标准库中带有一个Queue模块,顾名思义,队列.该模块也衍生出一些基本队列不具有的功能. 我们先看一下队列的方法: put 存数据 get 取数据 empty 判断队列是否为空 qsize ...

  4. MVP架构下解决 RxJava 自动解绑问题

    背景 MVP 模式下使用 RxJava 处理网络访问的回调,当数据返回时 Presenter 调用绑定的 View 的方法. 定义 BasePresenter 如下: public class Bas ...

  5. JVM运行时数据区--深入理解Java虚拟机 读后感

    程序计数器 程序计数器是线程私有的区域,很好理解嘛~,每个线程当然得有个计数器记录当前执行到那个指令.占用的内存空间小,可以把它看成是当前线程所执行的字节码的行号指示器.如果线程在执行Java方法,这 ...

  6. 如何使用dmidecode命令查看硬件信息

    引言 当我们需要获取机器硬件信息时,可使用linux系统自带的dmidecode工具进行查询. dmidecode命令通过读取系统DMI表,显示服务器硬件和BIOS信息.除了可使用dmidecode查 ...

  7. 用python实现银行家算法

    编制模拟银行家算法的程序,并以下面给出的例子验证所编写的程序的正确性. 进程 已占资源 最大需求数 资源种类 A B C D A B C D P0 0 0 1 2 0 0 1 2 P1 1 0 0 0 ...

  8. 洛谷 P3870 [TJOI2009]开关

    题意简述 有n盏灯,默认为关,有两个操作: 1.改变l~r的灯的状态(把开着的灯关上,关着的灯打开) 2.查询l~r开着的灯的数量 题解思路 维护一个线段树,支持区间修改,区间查询 懒标记每次^1 代 ...

  9. Javascript实现简单地发布订阅模式

    不论是在程序世界里还是现实生活中,发布—订阅模式的应用都非常广泛.我们先看一下现实中的例子. 小明最近看上了一套房子,到了售楼处之后才被告知,该楼盘的房子早已售罄.好在售楼MM告诉小明,不久后还有一些 ...

  10. 《统计学习方法》极简笔记P2:感知机数学推导

    感知机模型 输入空间是$\chi\subseteq\mathbb{R}^n$,输出空间是$y={+1,-1}$ 感知机定义为:$f(x)=sign(wx+b)$ 感知机学习策略 输入空间任一点$x_0 ...