在使用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. 使用nginx代理centos yum 源

    我们在安装centos 服务器时,可能会有以下情况: 局域网内有若干台服务器,但是只有一台服务器可以连接外网,其余服务器都不可以连接外网,但通过局域网与外网机器联通. 那么我们再使用 yum 安装软件 ...

  2. 信息收集框架——recon-ng

    背景:在渗透测试前期做攻击面发现(信息收集)时候往往需要用到很多工具,最后再将搜集到的信息汇总到一块.          现在有这样一个现成的框架,里面集成了许多信息收集模块.信息存储数据库.以及报告 ...

  3. Go-TCP粘包

    TCP黏包 黏包示例 服务端代码如下: // socket_stick/server/main.go func process(conn net.Conn) { defer conn.Close() ...

  4. spring-boot-plus V1.2.1 发布 文件上传下载和静态资源访问

    [V1.2.1-RELEASE] 2019.08.21 ⭐️ New Features 文件上传保存到服务器指定目录 文件下载 访问上传的图片等资源 启用项目静态资源访问,可访问static/temp ...

  5. AutoResetEvent控制线程用法

    本文主要来自一道面试题,由于之前对AutoResetEvent的用户很模糊(即使已经使用过了).面试题题目很简洁:两个线程交替打印0~100的奇偶数.你可以先动手试试,我主要是尝试在一个方法里面完成这 ...

  6. Linux 终端命令格式

    Linux 终端命令格式 一.目标 了解终端命令格式 知道如何查阅终端命令帮助信息 二. 终端命令格式 command [-options] [parameter] 说明: command:命令名,相 ...

  7. 《Java 8 in Action》Chapter 8:重构、测试和调试

    我们会介绍几种方法,帮助你重构代码,以适配使用Lambda表达式,让你的代码具备更好的可读性和灵活性.除此之外,我们还会讨论目前比较流行的几种面向对象的设计模式, 包括策略模式.模板方法模式.观察者模 ...

  8. 一文道尽JavaScript 20年的发展史

      作者介绍:Andrew Montalenti是Parse.ly的CTO, 一个长期的Python爱好者,以及初创公司和其他项目的创始人. 原文链接:https://amontalenti.com/ ...

  9. Leetcode之二分法专题-852. 山脉数组的峰顶索引(Peak Index in a Mountain Array)

    Leetcode之二分法专题-852. 山脉数组的峰顶索引(Peak Index in a Mountain Array) 我们把符合下列属性的数组 A 称作山脉: A.length >= 3 ...

  10. 一文看尽Java-Thread

    一.前言      主要分成两部说起:Thread源码解读和常见面试题解答,废话不多说开始: 二.源码解读 首先看下构造函数,构造函数都是通过调用init方法对属性进行初始化,主要是对线程组.线程名字 ...