在使用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. MySQL数据库基本知识(理论总结)

    定义:数据库就是一个文件系统,通过sql语句来获取数据 关系型数据库:关系型数据库存放的是实体时间的关系,在数据库层面来看就是存放的是表和表之间的关联关系 常见的关系型数据库   MySQL    D ...

  2. http客户端-性能比较系列-第二篇-多线程

    系列文章: 单线程性能测试:https://www.cnblogs.com/victor2302/p/11077208.html 多线程性能测试:https://www.cnblogs.com/vic ...

  3. 峰回路转:去掉 DbContextPool 后 Windows 上的 .NET Core 版博客表现出色

    今天早上,我们修改了博客程序中的1行代码,将 services.AddDbContextPool 改为 services.AddDbContext ,去掉 DbContextPool . 然后奇迹出现 ...

  4. Oracle中的转换函数

    Oracle中的转换函数有三个,分别为to_char(),to_date(),to_number() 1.to_char()的用法 格式化当前的日期时间 select sysdate,to_char( ...

  5. static用法总结:

    这是我的第一篇随笔! 1.当1.cpp和2.cpp都定义了同一个全局时链接会报错,变量名冲突.需要将其中一个设置为static控制其作用域为只在一个源文件内部. 2.函数名也是全局的,故static的 ...

  6. 盘一盘 NIO (二)—— Channel解析

    Channel是个啥? Channel,顾名思义,它就是一个通道.NIO中的所有IO都是从 Channel 开始的. Channel通道和流非常类似,主要有以下几点区别: 1.流是单向的,通道是双向的 ...

  7. 6090A一种手指笔

    发明名称--一种手指笔 申请号   CN201821972396.6 申请日   2018.11.28 公开(公告)号   CN209224777U 公开(公告)日   2019.08.09 IPC分 ...

  8. odoo视图中常用widget

    widget="statusbar" 头部状态条标签 widget="email" 电子邮件地址标签 widget="selection" ...

  9. 《Tomcat和JVM的性能调优你真的学会了吗?》总结篇

    Tomcat性能调优: 找到Tomcat根目录下的conf目录,修改server.xml文件的内容.对于这部分的调优,我所了解到的就是无非设置一下Tomcat服务器的最大并发数和Tomcat初始化时创 ...

  10. centos6在安装wdcp以后,导入MySQLdb报错问题

    为了方便linux的使用,会先安装好wdcp对服务器进行管理.在装好wdcp会对一些nginx,mysql等自动安装,但是mysql的安装目录会在/www/wdlinux这个目录下,跟一般的mysql ...