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 相关文章推荐
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
layer扩展打开/关闭动画的方法
Sep 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用数组返回无限分类的列表数据的代码
2010/08/08 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
python登录并爬取淘宝信息代码示例
2017/12/09 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
最受欢迎的自我评价
2013/12/22 职场文书
指导教师评语
2014/04/26 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
表扬信格式模板
2015/05/05 职场文书
党员证明信
2015/06/19 职场文书
公司晚会主持词
2019/04/17 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL