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控制frame,iframe的src属性代码
Dec 31 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
Ajax异步刷新功能及简单案例
Nov 20 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导出oracle库的php代码
2009/04/20 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
php抽象类用法实例分析
2015/07/07 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python批量修改文件后缀示例代码分享
2013/12/24 Python
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
python下载图片实现方法(超简单)
2017/07/21 Python
django 常用orm操作详解
2017/09/13 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
python实现狄克斯特拉算法
2019/01/17 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
廉政教育心得体会
2014/01/01 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
党支部活动策划方案
2014/08/18 职场文书
2015年党员承诺书
2015/01/21 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB