在使用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. ASP.NET Core Web API 跨域(CORS) Cookie问题

    身为一个Web API,处理来自跨域不同源的请求,是一件十分合理的事情. 先上已有的文章,快速复制粘贴,启用CORS: Microsoft:启用 ASP.NET Core 中的跨域请求 (CORS) ...

  2. 201312-2ISBN号码

    问题描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位分隔符,其规定格式如“x-xxx-xxxxx-x”,其中符号“-”是分隔符(键盘上的减号),最后一位 ...

  3. Scala集合(四)

    1. 集合 集合主要有三种: Sequence Map Set sequence是一种线性元素的集合,可能会是索引或者线性的(链表).map是包含键值对的集合,就像Java的Map,set是包含无重复 ...

  4. 【0807 | Day 10】字符编码以及Python2/3编码的区别

    一.计算机基础 计算机组成:CPU.内存.硬盘 CPU:控制程序运行(从内存中取出文本编辑器的数据存入内存) 内存:运行程序 硬件:存储数据 二.文本编辑器存取文件的原理 比如计算机只能识别0和1,文 ...

  5. 使用DOM4J 对xml解析操作

    参考自:https://blog.csdn.net/redarmy_chen/article/details/12969219 dom4j是一个Java的XML API,类似于jdom,用来读写XML ...

  6. 有一个时间插件引发的关于 newDate().setMonth() 的问题

    项目中遇到一个时间插件的BUG,查看源码之后发现是因为setMonth()的问题,使用了之后会某些月份会出现月份加一的问题, 查阅资料后发现  setMonth()其实是设置与当前时间天数相同的月份, ...

  7. Vector使用方法简单整理

    使用vector,需要引用vector库: #include<vector> 首先,创建一个可以容纳int的vector变量——arr: vector<int> arr; 接着 ...

  8. 前端小知识-html5

    一.伪类与伪元素 为什么css要引入伪元素和伪类:是为了格式化文档树以外的信息,也就是说,伪类和伪元素是用来修饰不在文档树中的部分 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根 ...

  9. Tomcat源码分析 (八)----- HTTP请求处理过程(一)

    终于进行到Connector的分析阶段了,这也是Tomcat里面最复杂的一块功能了.Connector中文名为连接器,既然是连接器,它肯定会连接某些东西,连接些什么呢? Connector用于接受请求 ...

  10. net core Webapi基础工程搭建(三)——在线接口文档Swagger

    目录 前言 Swagger NuGet引用第三方类库 别急,还有 没错,注释 小结 前言 前后分离的好处,就是后端埋头做业务逻辑功能,不需要过多考虑用户体验,只专注于数据.性能开发,对于前端需要的数据 ...