在使用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. 19 个 JavaScript 编码小技巧

    这篇文章适合任何一位基于JavaScript开发的开发者.我写这篇文章主要涉及JavaScript中一些简写的代码,帮助大家更好理解一些JavaScript的基础.希望这些代码能从不同的角度帮助你更好 ...

  2. Jmeter使用csv文件读取测试数据

    最近有同事在测试过程中遇到需要造批量测试数据的问题,这些数据往往是同一种单据,但是单据的内容不同,如果手工创建就比较费时费力.那我们用jmeter的csv文件来读取测试数据就完美解决了这个问题. 我们 ...

  3. Spring boot实战项目整合阿里云RocketMQ (非开源版)消息队列实现发送普通消息,延时消息 --附代码

    一.为什么选择RocketMQ消息队列? 首先RocketMQ是阿里巴巴自研出来的,也已开源.其性能和稳定性从双11就能看出来,借用阿里的一句官方介绍:历年双 11 购物狂欢节零点千万级 TPS.万亿 ...

  4. Linux配置部署_新手向(二)——Nginx安装与配置

    目录 前言 Nginx 配置(后续补充) 小结 @ 前言 上一篇整完Linux系统的安装,紧接着就开始来安装些常用的东西吧,首先Nginx. Nginx 简介 Nginx作为转发,负载均衡,凭着其高性 ...

  5. 优化Recorder H5录音:可边录边转码上传服务器,支持微信提供Android IOS Hybrid App源码

    Recorder H5 GitHub开源库随着支持功能的增多,音频转码处理效率渐渐的跟不上需求了,近期抽时间对音频转码部分进行了升级优化,以支持更多实用的功能. 另外IOS的Hybrid App也完成 ...

  6. 使用flask-restful搭建API

    最简单的例子 ---~~~~ 访问http://127.0.0.1:5000/ , 返回{"hello": "world"} from flask import ...

  7. C# NAudio录音和播放音频文件-实时绘制音频波形图(从音频流数据获取,而非设备获取)

    NAudio的录音和播放录音都有对应的类,我在使用Wav格式进行录音和播放录音时使用的类时WaveIn和WaveOut,这两个类是对功能的回调和一些事件触发. 在WaveIn和WaveOut之外还有对 ...

  8. rabbit - producer的confirm和consumer的ack模式

    本篇和大家分享的是关于rabbit的生产和消费方的一些实用的操作:正如文章标题,主要内容如producer的confirm和consumer的ack,这两者使用的模式都是用来保证数据完整性,防止数据丢 ...

  9. 01_liteide 集成环境运行的问题

    //go语言是以包为管理单位 //每个文件必须先声明包 //程序必须有一个main包 package main import (  "fmt" ) //入口函数 func main ...

  10. 带你入门SpringCloud服务发现 | Eurka搭建和使用

    前言 服务注册与发现是微服务中最为基础的环节,而 Eureka 就是一个可以帮助你实现服务注册与发现的选择之一.如果你对 Eureka 和服务发现了解甚少,那么该篇博客将会帮助到你.文中通过具体操作带 ...