input file上传文件改变默认样式
- 2019 年 11 月 27 日
- 筆記
我们知道，在使用到input file上传文件的时候，会出现这样很丑的默认样式，作为前端开发的我们，主要责任就是去优化这些样式，以更美观的方式呈现出来，但是，这个默认样式没有可以去修改的属性，还是比较麻烦的。
这个时候，就需要用到一些障眼法了，将原来的样式隐藏起来，再重新写一个按钮代替，与原来的位置重合即可。
原本的样式是这样的：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="file" class="file-upload" /> </body> </html> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <style> #importExcel { color: #fff; width: 51px; height: 30px; display: inline-block; border: none; background: cornflowerblue; background-size: 100% 100%; } .change { position: absolute; display: block; width: 103px; top: 2px; left: 5px; height: 40px; opacity: 0; cursor: pointer; } .file-name { position: absolute; top: 9px; width: 133px; height: 30px; padding: 0 8px; line-height: 25px; margin-left: 86px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; } .btnMask { color: #fff; width: 86px; height: 30px; text-align: center; line-height: 30px; margin-right: 131px; display: inline-block; border: none; background: cornflowerblue; background-size: 100% 100%; cursor: pointer; } </style> </head> <body> <form s action="/criminal/import" id="uploadForm" enctype="multipart/form-data" method="post"> <a class="btnMask">选择文件</a> <input class="change" id="mFile" type="file" name="mFile"> <div class="file-name"></div> <input type="button" value="导入" id="importExcel" name="btn"> </form> </body> <script> $("#mFile").change(function() { var arrs = $(this).val().split('\'); var filename = arrs[arrs.length - 1]; $(".file-name").html(filename); }); //导入按钮 $('#importExcel').click(function() { if(checkData()) { $('#uploadForm').ajaxSubmit({ url: "http://localhost:3000/users", success: function(data) { alert(JSON.stringify(data)) for(var i = 0; i < data.length; i++) { // 这里的i是代表数组的下标 if(i == data.length - 1) alert("已插入" + data[i] + "条罪犯数据") else alert(data[i]) } } }); } }); //JS校验form表单信息 function checkData() { var fileDir = $("#mFile").val(); var suffix = fileDir.substr(fileDir.lastIndexOf(".")); if("" == fileDir) { msg(5, "选择需要导入的Excel文件！"); return false; } if(".xls" != suffix && ".xlsx" != suffix) { msg(5, "选择Excel格式的文件导入！"); return false; } return true; } </script> </html>
这是改完以后的样式，根据需要来设置属性，这里已经写好了选择文件，导入到表格里面的效果啦。
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
