input上传按钮的优化
在使用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上传按钮的优化的更多相关文章
- 上传按钮样式优化 <input type="file" />
<html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...
- input上传按钮美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- input上传按钮 文字修改办法
解决思路是把input 放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件的上传. 具体代码: <style> #uploadImg{ font-size ...
- input[type=file] 样式美化,input上传按钮美化
<style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...
- 一个漂亮的上传按钮input[type=file]
;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...
- input美化上传按钮美化
今天工作需求碰到 样式改变上传按钮 效果: <a href="javascript:;" class="a-upload"> <input t ...
- JQuery上传插件uploadify优化
旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...
- webuploader的一个页面多个上传按钮实例
借鉴一位大佬的demo 附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览 直接上传图片后拿到回传地址给img标签显示图 ...
随机推荐
- 19 个 JavaScript 编码小技巧
这篇文章适合任何一位基于JavaScript开发的开发者.我写这篇文章主要涉及JavaScript中一些简写的代码,帮助大家更好理解一些JavaScript的基础.希望这些代码能从不同的角度帮助你更好 ...
- Jmeter使用csv文件读取测试数据
最近有同事在测试过程中遇到需要造批量测试数据的问题,这些数据往往是同一种单据,但是单据的内容不同,如果手工创建就比较费时费力.那我们用jmeter的csv文件来读取测试数据就完美解决了这个问题. 我们 ...
- Spring boot实战项目整合阿里云RocketMQ (非开源版)消息队列实现发送普通消息,延时消息 --附代码
一.为什么选择RocketMQ消息队列? 首先RocketMQ是阿里巴巴自研出来的,也已开源.其性能和稳定性从双11就能看出来,借用阿里的一句官方介绍:历年双 11 购物狂欢节零点千万级 TPS.万亿 ...
- Linux配置部署_新手向(二)——Nginx安装与配置
目录 前言 Nginx 配置(后续补充) 小结 @ 前言 上一篇整完Linux系统的安装,紧接着就开始来安装些常用的东西吧,首先Nginx. Nginx 简介 Nginx作为转发,负载均衡,凭着其高性 ...
- 优化Recorder H5录音:可边录边转码上传服务器,支持微信提供Android IOS Hybrid App源码
Recorder H5 GitHub开源库随着支持功能的增多,音频转码处理效率渐渐的跟不上需求了,近期抽时间对音频转码部分进行了升级优化,以支持更多实用的功能. 另外IOS的Hybrid App也完成 ...
- 使用flask-restful搭建API
最简单的例子 ---~~~~ 访问http://127.0.0.1:5000/ , 返回{"hello": "world"} from flask import ...
- C# NAudio录音和播放音频文件-实时绘制音频波形图(从音频流数据获取,而非设备获取)
NAudio的录音和播放录音都有对应的类,我在使用Wav格式进行录音和播放录音时使用的类时WaveIn和WaveOut,这两个类是对功能的回调和一些事件触发. 在WaveIn和WaveOut之外还有对 ...
- rabbit - producer的confirm和consumer的ack模式
本篇和大家分享的是关于rabbit的生产和消费方的一些实用的操作:正如文章标题,主要内容如producer的confirm和consumer的ack,这两者使用的模式都是用来保证数据完整性,防止数据丢 ...
- 01_liteide 集成环境运行的问题
//go语言是以包为管理单位 //每个文件必须先声明包 //程序必须有一个main包 package main import ( "fmt" ) //入口函数 func main ...
- 带你入门SpringCloud服务发现 | Eurka搭建和使用
前言 服务注册与发现是微服务中最为基础的环节,而 Eureka 就是一个可以帮助你实现服务注册与发现的选择之一.如果你对 Eureka 和服务发现了解甚少,那么该篇博客将会帮助到你.文中通过具体操作带 ...