文件上传是我们经常使用的功能，但是原来的输入风格太难看了。可以自定义输入文件上传样式吗？

我在这里写了两个方法。表单提交和ajax异步提交都可以，自动上传或者点击上传按钮上传都可以。

先看效果：

粘贴代码：

方法1

！-方法1: div :设置宽度和高度，overflow:hidden多余的部分隐藏起来了。输入：设置水平z-index=1；设置透明度opacity:0设置相对定位位置：相对；重叠两个元素i :设置级别z-index=0；(小于输入)设置相对定位位置：相对；使两个元素重叠。使用div框出尺寸。输入高于I，但透明度为0。当我们点击I时，我们实际上点击了输入，但视觉上我们只看到i - h3方法1:/H3表单操作='上传'方法=' post ' enctype=' multipart/form-data '！-辅助div，框架显示内容-div style=' width : 20px；height: 20px' overflow:hidden'！-实际选择文件输入-输入style=' position :相对；z指数：1；opa city 33600 ' onchange=' change()' id=' file ' type=' file ' name=' file '/！-视觉图标-I类='字形图标字形图标-打开'样式='位置：相对；top :-22px；z指数：0；' font-size : 20px；'/i /div！-文件名-br/span id=' filename'/span！-form submit button-br/input id=' but _ submit ' type=' submit ' value=' upload '//form script function change(){//echo文件名$ ('# filename ')。文本($ ('# file ')。val())；}/脚本方法2

！-方法2:输入：设置等级显示：无；直接隐藏I : onclick=' document . getelementbyid(' file 2 ')。单击()；'点击图标触发点击输入直接隐藏输入，设置点击图标触发点击输入达到预期效果- h3方法2:/h3表单id='uploadForm '！-实际选择文件输入-输入样式=' display: none'onchange=' change 2()' id=' file 2 ' type=' file ' name=' file '/！-视觉图标-I类='字形图标字形图标-打开'样式=' font-size : 20px'onclick=' document . getelementbyid(' file 2 ')。单击()；'/我！-文件名-br/span id=' filename 2 '/span/formscript//自动上传函数change2() {//回显文件名$ ('# filename2 ')。文本($ ('# file2 ')。val())；//上传varform=new formdata(document . getelementbyid(' upload form '))；$.ajax({ url: ctx '/rack/upload '，type: 'post '，data: form，processData: false，contentType: false，success: function(数据){ console.log(数据)；}，error:函数(e){ console . log(e)；} });}/scriptcontroller

@ post mapping(' upload ')public result model boolean upload(多部分文件文件){//filename system。out . println(file . getoriginalfilename())；返回ResultModel.of(真)；}风格还是有点难看，不过没关系。关键是掌握方法，找个UI妹子帮忙调试，可以做出任何想要的UI效果！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。