js自定义input文件上传样式


Posted in Javascript onOctober 26, 2018

文件上传是我们经常会用到的功能,但是原生的input样式太丑了,能不能自定义一个input文件上传样式呢?

我这里写了两种方法,form表单提交跟ajax异步提交都没有问题,自动上传或者点击上传按钮上传也都没问题

先看效果:

js自定义input文件上传样式

js自定义input文件上传样式

js自定义input文件上传样式

代码贴出来: 

方法1

<!--
      方法1:
      div : 设置宽高、overflow:hidden;超出的部分被隐藏
      input : 设置层级z-index = 1;设置透明度opacity:0;设置相对定位position:relative;使两个元素重叠
      i : 设置层级z-index = 0;(要比input小)设置相对定位position:relative;使两个元素重叠
      利用div框出大小,input在i上面但透明度为0,当我们点击i时其实是点击到了input但视觉上我们只看到了i
    -->
    <h3>方法1:</h3>
    <form action="upload" method="post" enctype="multipart/form-data">
      <!-- 辅助div,框出显示内容 -->
      <div style="width: 20px;height: 20px;overflow:hidden;">
        <!-- 实际的选择文件input -->
        <input style="position:relative;z-index :1;opacity:0" onchange="change()" id="file" type="file"
            name="file"/>
        <!-- 可视图标 -->
        <i class="glyphicon glyphicon-open" style="position:relative;top:-22px;z-index :0;font-size: 20px;"></i>
      </div>
      <!-- 文件名 -->
      <br/><span id="fileName"></span>
      <!-- 表单提交按钮 -->
      <br/><input id="but_submit" type="submit" value="上传"/>
    </form>
    <script>
      function change() {
        //回显文件名
        $("#fileName").text($("#file").val());
      }
</script>

方法2

<!--
    方法2:
      input : 设置层级display: none; 直接隐藏
      i : onclick="document.getElementById('file2').click();" 图标的click触发input的click
      直接隐藏input,设置图标的click触发input的click,从而达到我们想要的效果
    -->
    <h3>方法2:</h3>
    <form id="uploadForm">
      <!-- 实际的选择文件input -->
      <input style="display: none;" onchange="change2()" id="file2" type="file" name="file"/>
      <!-- 可视图标 -->
      <i class="glyphicon glyphicon-open" style="font-size: 20px;"
        onclick="document.getElementById('file2').click();"></i>
      <!-- 文件名 -->
      <br/><span id="fileName2"></span>
    </form>
    <script>
      //自动上传
      function change2() {
        //回显文件名
        $("#fileName2").text($("#file2").val());
        //执行上传
        var form = new FormData(document.getElementById("uploadForm"));
        $.ajax({
          url: ctx + "/rack/upload",
          type: "post",
          data: form,
          processData: false,
          contentType: false,
          success: function (data) {
            console.log(data);
          },
          error: function (e) {
            console.log(e);
          }
        });
    }
</script>

controller

@PostMapping("upload")
  public ResultModel<Boolean> upload(MultipartFile file) {
    //文件名
    System.out.println(file.getOriginalFilename());
    return ResultModel.of(true);
}

样式还是丑了一点,但这些都不重要,关键是掌握了方法再找个UI小姐姐来帮忙调试,就可以做出任何想要的UI效果啦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
JS实现手风琴特效
Nov 08 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 #Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 #Javascript
webpack4+react多页面架构的实现
Oct 25 #Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 #Javascript
代码整洁之道(重构)
Oct 25 #Javascript
Vue使用NPM方式搭建项目
Oct 25 #Javascript
小程序云开发实战小结
Oct 25 #Javascript
You might like
极典R601SW收音机
2021/03/02 无线电
APMServ使用说明
2006/10/23 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
拖拉表格的JS函数
2008/11/20 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python中cPickle用法例子分享
2014/01/03 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python实现音乐下载的统计
2018/06/20 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
python用什么编辑器进行项目开发
2020/06/17 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
澳大利亚商务邀请函
2014/01/17 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
求职自荐信的格式
2014/04/07 职场文书
售后服务承诺书模板
2014/05/21 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
计生工作先进事迹
2014/08/15 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
python flask框架快速入门
2021/05/14 Python
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL