前言

  文件上传是我们经常会用到的功能,但是原生的input样式太丑了,能不能自定义一个input文件上传样式呢?我这里写了两种方法,form表单提交跟ajax异步提交都没有问题,自动上传或者点击上传按钮上传也都没问题

效果

代码编写

方法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效果啦!

自定义input文件上传样式的更多相关文章

  1. 自定义input文件上传 file的提示文字及样式

    简单记录一下 效果图: 代码: <input class="aload" type='button' value='上传附件' onClick='javascript:$(& ...

  2. 表单多文件上传样式美化 && 支持选中文件后删除相关项

    开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...

  3. input文件上传(上传单个文件/多选文件/文件夹、拖拽上传、分片上传)

    //上传单个/多个文件 <input title="点击选择文件" id="h5Input1" multiple="" accept= ...

  4. Layui文件上传样式在ng-dialog不显示的问题处理

    1.项目业务改动,在一个弹窗页面加图片上传. 2.页面使用angular框架,图片上传使用layui的文件上传组件. js: layui.upload({ url: '/test/upload.jso ...

  5. input 文件上传

    <button class="blueButton fileinput-button" style="width:165px;" @click=" ...

  6. 自定义ExtJS文件上传

    日常工作中,一般文件上传都是跟随表单一起提交的,但是遇到form表单中有许多地方有文件上传时这种方式却不是很适用,以下是我工作中用的文件上传方式: { xtype: 'fileuploadfield' ...

  7. 自定义WordPress文件上传路径

    自WordPress 3.5版本开始,隐藏了后台媒体设置页面的“默认上传路径和文件的完整URL地址”选项,可以通过下面的代码将该选项调出来. 将下面的代码添加到当前主题functions.php文件中 ...

  8. input file文件上传样式

    <style>    .file-group {        position: relative;        width: 200px;        height: 80px;  ...

  9. JS实现表单多文件上传样式美化支持选中文件后删除相关项

    http://www.youdaili.net/javascript/5903.html

随机推荐

  1. 再谈docker基本命令

    子曰,温故而知新 今日,再次看书之际,又寻得docker的几条使用命令,用小本本记下来 配置docker镜像源 当我们在拉去一些共有镜像时,默认,docker会向docker.io去获取,如果在拉取的 ...

  2. css实现圆形倒计时效果

    实现思想: 1.最外层包裹内部的div1(.box) 2.内部左右两边div2(.left_box和.right_box),宽度为div1的一半,通过overflow:hidden隐藏其内部的div ...

  3. HDFS基本架构及概念介绍

    简单介绍 l  设计思想 分而治之:将大文件.大批量文件,分布式存放在大量服务器上,以便于采取分而治之的方式对海量数据进行运算分析: l  在大数据系统中作用: 为各类分布式运算框架(如:mapred ...

  4. Javascript高级编程学习笔记(20)—— 创建对象

    由于今天有点事,加上对象原型链的东西有点多,所以今天这篇就讲一个小的知识点吧 也算为明天的对象继承做铺垫 工厂模式 虽然使用对象字面量来创建一个对象十分地便捷,但是这个方法有一个显著的缺点 那就是如果 ...

  5. redux源码学习笔记 - applyMiddleware

    在创建store时,createStore(reducer, preloadedState, enhancer),除了reducer函数,初始状态,还可以传入enhancer.这个enhancer在c ...

  6. Informatica

    安装 相关专题 关于Bulk加载模式 性能调优 性能瓶颈 性能瓶颈概览 性能瓶颈之Target 性能瓶颈之Source 性能瓶颈之Mapping 性能瓶颈之Session 性能瓶颈之System 性能 ...

  7. Web存储及文件拖拽

    存储 实现内容的永久保存(localStorage) 保存: localStorage.自定义键名="123"; 获取: //判断是否有内容 if(localStorage.自定义 ...

  8. JAVA中的Random()函数

    Java中存在着两种Random函数: 一.java.lang.Math.Random; 调用这个Math.Random()函数能够返回带正号的double值,该值大于等于0.0且小于1.0,即取值范 ...

  9. AutoCloseable的用法

    今天学习JDBC的时候查看了接口Statement的executeQuery()方法的时候偶然发现了一个新的接口: 看到红笔圈出的那句话当时没反应过来,才知道是接口的多继承,但是后面的那个接口并没有见 ...

  10. 11.Django2.0文档

    第四章 模板 1.标签 (1)if/else {% if %} 标签检查(evaluate)一个变量,如果这个变量为真(即,变量存在,非空,不是布尔值假),系统会显示在 {% if %} 和 {% e ...