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 相关文章推荐
Prototype Number对象 学习
Jul 19 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
Element实现动态表格的示例代码
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
PHP的一个基础知识 表单提交
2011/07/04 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
Vue代码整洁之去重方法整理
2019/08/06 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 全局变量的import机制介绍
2017/09/07 Python
Python多继承顺序实例分析
2018/05/26 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
2015年前台接待工作总结
2015/05/04 职场文书