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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
解决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
PHP禁止页面缓存的代码
2011/10/23 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
python基础教程之循环介绍
2014/08/29 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
Python数据类型之List列表实例详解
2019/05/08 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
python数据抓取3种方法总结
2021/02/07 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
学生会部长竞聘书
2014/03/31 职场文书
寄语学生的话
2014/04/10 职场文书
兽医医药专业求职信
2014/07/27 职场文书
售房协议书范本2014
2014/10/23 职场文书
民间借贷借条范本
2015/05/25 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书