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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
JS实现图片预览的两种方式
Jun 27 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
layui 实现表格某一列显示图标
Sep 19 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
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
原生js开发的日历插件
2017/02/04 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
python递归函数绘制分形树的方法
2018/06/22 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
python修改txt文件中的某一项方法
2018/12/29 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
C#笔试题集合
2013/06/21 面试题
微博营销计划书
2014/01/10 职场文书
学员自我鉴定
2014/03/19 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
行政文员岗位职责
2015/02/04 职场文书
新年晚会开场白
2015/05/29 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android