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 相关文章推荐
19个很有用的 JavaScript库推荐
Jun 27 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
解决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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
浅谈flask源码之请求过程
2018/07/26 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
员工晚婚的请假条
2014/02/08 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
员工离职感谢信
2015/01/22 职场文书
春风化雨观后感
2015/06/11 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫