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与vbscript数据共享
Jan 09 Javascript
js正确获取元素样式详解
Aug 07 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
vue实现商城购物车功能
Nov 27 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
js实现弹窗效果
Aug 09 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 变量类型的强制转换
2009/10/23 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
JavaScript 异步调用
2017/10/25 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
python的unittest测试类代码实例
2017/12/07 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
七夕情人节促销方案
2014/06/07 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
慰问信格式
2015/02/14 职场文书
工作感言一句话
2015/08/01 职场文书
MYSQL 表的全面总结
2021/11/11 MySQL
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript