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学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
Javascript变量作用域详解
Dec 06 Javascript
jQuery的position()方法详解
Jul 19 Javascript
js生成随机数的方法实例
Oct 16 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
js prototype和__proto__的关系是什么
Aug 23 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中显示格式化的用户输入
2006/10/09 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
vue组件间通信解析
2017/03/01 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
简单介绍Python中的struct模块
2015/04/28 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
2014迎新年晚会策划方案
2014/02/23 职场文书
改革共识倡议书
2014/08/29 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
2016年教师节慰问信
2015/12/01 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书