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设计模式 封装和信息隐藏(上)
Jul 24 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
CI框架常用方法小结
2016/05/17 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
Vue实现手机计算器
2020/08/17 Javascript
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
利用python画出AUC曲线的实例
2020/02/28 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
运动会稿件100字
2014/02/21 职场文书
求职简历自我评价范例
2014/03/12 职场文书
村党支部公开承诺书
2014/05/29 职场文书
2015年采购员工作总结
2015/04/27 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫