input[type="file"]的样式以及文件名的显示

如何美化input[type="file"]

基本思路是：

（1）首先在 input 外层套一个 div ；

（2）将 div 和 input 设置为一样大小（width和height）；

（3）设置 div 为相对位置， input 为绝对位置，并将 input 的 top 和 right 设为 0 ；

这样， div 和 input 就重叠了，点击 div 就相当于点击 input ；

（4）设置 input 的 opacity 为 0 ，全透明，这样就只能看见 div 了；

至于 div 的样式就随便设置了。

html:

<form action="#" enctype="multipart/form-data" method="post"> <div class="fileupload"> <script> function getFilename(){ var filename=document.getElementById("file").value; if(filename==undefined||filename==""){ document.getElementById("filename").innerHTML="点击此处上传文件"; } else{ var fn=filename.substring(filename.lastIndexOf("\\")+1); document.getElementById("filename").innerHTML=fn; //将截取后的文件名填充到span中 } } </script> <span id="filename">点击此处上传文件</span> <input type="file" name="file" id="file" onchange="getFilename()"/> </div> </form>

 

css:

1 /*文件上传*/ 2 .fileupload{ 3 position: relative; 4 width:200px; 5 height:35px; 6 border:1px solid #66B3FF; 7 border-radius: 4px; 8 box-shadow: 1px 1px 5px #66B3FF; 9 line-height: 35px; 10 padding-left: 8px; 11 overflow: hidden; 12 } 13 .fileupload input{ 14 position: absolute; 15 width:200px; 16 height:35px; 17 right: 0; 18 top: 0; 19 opacity: 0; 20 filter: alpha(opacity=0); 21 -ms-filter: 'alpha(opacity=0)'; 22 }

注意：input[type="file"] 的文件路径是受保护的，用 js 获取不到，使用上传的插件可以获取到。（只是从前端的角度讲）

转载于:https://www.cnblogs.com/lixiang1993/p/7813366.html

相关资源：数据结构—成绩单生成器