默认样式:

<input type="file" />

美化样式时:

  • 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100%
  • 可以用到定位
.box{
  position:relative;
  width:300px;
  height:36px;
}
input[type="file"]{
  width:100%;
  height:100%;
  opacity:0;
  position:absolute;
  top:0;
  left:0;
}

获取上传文件的文件名:

$("input[type='file']").on("change",function(){
var files = $(this).prop("files");
   // console.log(files);
var filename = files[0].name; //获取上传的文件名
$(".showName").val(filename);
});

files.length;      //上传文件个数,可能是多个
files[0].lastModified //代表文件的修改日期,而非上传日期
files[0].name; //上传文件名
files[0].size; //上传文件大小(单位是b)
files[0].type; //文件类型

input file样式美化的更多相关文章

  1. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  2. 自定义input file样式

    自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...

  3. input:file样式怎样修改

    问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑 解决办法: 给file设置透明度为0,让用户看不见他 创建新的button按钮 修改button按钮样 ...

  4. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  5. ie浏览器下HTML上传控件input=file的美化

    近期写东西用到了input=file这个按钮,给其添加背景,在其它浏览器上都可以正常的显示,可一到ie上便不听话了,完全没有添加上,显的很难看.今天在网上找到一方法,试过后感觉很好,终于把这个问题给解 ...

  6. input file样式修改,图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  7. 文件上传input type="file"样式美化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. input[type=file] 样式美化,input上传按钮美化

    <style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...

  9. input(file)样式修改及上传文件名显示

    实现思路: a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素.样式和功能都具备 ...

随机推荐

  1. Linux之Ubuntu系统安装搜狗输入法

    如何在Ubuntu系统中安装搜狗输入法? 1.第一步  下载搜狗输入法文件for Linux 2.检查更新 update 如果没有更新的话,需要做这一步 3.语言支持 选择fcitx,然后关闭界面 4 ...

  2. 集合之六:Map接口

    Map接口概述 Map接口中的集合和Collection接口中的集合在存储数据的格式上有很大的不同,Map接口下的内容是以<K , V> ,键值对的形式存储的,我们查询API,Map接口的 ...

  3. ubuntu 14.04网卡配置以及关闭防火墙

    一.Ubuntu网卡配置如下: 在文件/etc/network/interfaces中进行以下配置 auto lo iface lo inet lookback auto eth0 iface eth ...

  4. pygame学习_part1_pygame写程序前的准备工作

    import pygame from pygame import * pygame.init() #准备pygame,不准备无法使用功能 pygame.display.set_mode((x,y坐标) ...

  5. docker pull 私有镜像

    错误演示 [root@CentOS7 jdk8]# curl http://10.20.2.29:5000/v2/_catalog {"repositories":["d ...

  6. 通过view实现字段的只读、隐藏操作【转】

    原文地址:http://cn.openerp.cn/view_groups/ 在OpenERP V7视图(ir.ui.view)多了一个非常有用的字段(groups_id) 'groups_id': ...

  7. jgGrid注销表格(动态修改表头)以及前台分页

    实例代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

  8. ubuntu上安装R的时候遇到的问题总结

    首先感谢这两篇博客的指导,第一篇是关于报错的总结,第二篇是第一篇中没有提到的错误,也就是我在安装的时候出现的错误. 1.下载R包 (去官网选择一个离你最近的镜像网址,我的是清华提供的镜像下载速度比较快 ...

  9. Firebird 安装多实例

    火鸟数据库的安装向导,默认不允许多实例. 但是不管出于什么原因,若想安装多实例,很简单. 1.先用安装文件,按照向导安装第一个实例. 2.安装后不要启动服务,根据需要配置好Firebird.conf. ...

  10. 如何快速备份还原Sql Server 数据库

    备份数据库 选择你要备份的数据库,鼠标右键单击,选择任务-备份 弹出备份数据库窗口,选择添加 弹出选择备份目标窗口,点击浏览,选择存放备份数据库的目录,输入文件名,后缀名输入.bak,点击确定,确定, ...