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 相关文章推荐
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
js实现双色球效果
Aug 02 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
JQuery 入门实例1
2009/06/25 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
js实现拖拽功能
2017/03/01 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
Javascript的this详解
2019/03/23 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
详解python调度框架APScheduler使用
2017/03/28 Python
python http基本验证方法
2018/12/26 Python
python多线程http压力测试脚本
2019/06/25 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Python实现中值滤波去噪方式
2019/12/18 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
python性能测试工具locust的使用
2020/12/28 Python
会计实习生工作总结的自我评价
2013/10/07 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
初一新生军训方案
2014/05/22 职场文书
党性教育心得体会
2014/09/03 职场文书
员工保密协议书
2014/09/27 职场文书
高中生旷课检讨书
2014/10/08 职场文书
中学推普周活动总结
2015/05/07 职场文书
代理词怎么写
2015/05/25 职场文书
九年级历史教学反思
2016/02/19 职场文书