默认样式:

<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. 总结day26 ----验证客户端的合法性,已经操作系统,进程的简单初识别

    前情提要 一:验证客户端的合法性: # .需要认证 # 程序和用户打交道的时候才会用到用户认证 # 对所有的客户端进行统一的认证 # # 我现在要做的事情 # 写一个server端 # 写一个clie ...

  2. 代码 | 自适应大邻域搜索系列之(2) - ALNS算法主逻辑结构解析

    00 前言 在上一篇推文中,教大家利用了ALNS的lib库求解了一个TSP问题作为实例.不知道你萌把代码跑起来了没有.那么,今天咱们再接再厉.跑完代码以后,小编再给大家深入讲解具体的代码内容.大家快去 ...

  3. Solr7.4的学习与使用

    学习的原因: 17年的时候有学习使用过lucene和solr,但是后来也遗忘了,最近公司有个项目需要使用到全文检索,正好也顺便跟着学习一下,使用的版本是Solr7.4的,下载地址:http://arc ...

  4. MyBatis学习笔记(一)创建第一个MyBatis项目

    一.新建Maven项目 http://www.mybatis.org/mybatis-3/zh/index.html 该链接为MyBatis官方地址 创建MyBatis项目主要有两种办法,一种是导入j ...

  5. Jenkins 插件升级时跳过 update site 的签名验证

    当升级jenkins插件时,如果链接的update site用的自签名证书,可以用这个选项来启动Jenkins,来跳过签名验证:  -Dhudson.model.DownloadService.noS ...

  6. excel 快速填充所有非连续空白单元格

    工作中经常会碰到这样的表,需要把空白的单元格填充完成.变成后图.下面就是方法.       工具/原料 EXCEL 方法/步骤   首先选中你要填充的区域,   按“F5"或者 Ctrl + ...

  7. 使用grunt搭建自动化的web前端开发环境

    使用grunt搭建自动化的web前端开发环境 我们一定经常听过grunt和gulp,它们都是用于搭建自动化的web前端开发环境的,这里主要介绍grunt的使用,值得一提的是,jQuery.bootst ...

  8. maven的安装配置超详细教程【含nexus】

    1 下载 下载地址:http://maven.apache.org/download.cgi 界面效果如下: 点击之后进入的apache 软件基金的发布目录,在这里你可以下载apache的所有项目. ...

  9. PHP之mb_strpos使用

    mb_strpos (PHP 4 >= 4.0.6, PHP 5, PHP 7) mb_strpos - Find position of first occurrence of string ...

  10. 深入理解java集合框架之---------Arraylist集合

    ArrayList简介 ArrayLIst是动态数组,用MSDN的说法就是Array的复杂版本,它提供了动态的增加和减少元素,实现了Collection和List接口,可以灵活的设置数组的大小,要注意 ...