Blueleaf share beautify file upload form select file button code

Template The file upload file form was written during production. The default style is not very beautiful. In order to look beautiful, we need to customize the code to beautify the file upload form selection button. In order to facilitate webmasters who need it, today Blueleaf shares the code of beautifying the file upload form selection button, which contains css Style, html code javascript Code. You only need to copy the code and modify it slightly to put it into the template for use.

 <style> *{margin:0; border:0;padding:0;} .file{margin:100px auto 0; width:300px;border:1px solid #00aff0;height:40px;border-radius:6px;position:relative} .blueButton{position:absolute; display:block;width:100px;height:40px;right:0;background-color:#00b3ee;color:#fff;text-decoration:none;text-align:center;font:normal normal normal 16px/40px 'Microsoft YaHei';cursor:pointer;border-radius:4px} .blueButton:hover{text-decoration:none} .myFileUpload{position:absolute; display:block;width:100px;height:40px;right:0;opacity:0} .show{position:absolute;top:5px;left:5px;width:calc(100% - 100px); height:30px;font:normal normal normal 14px/30px 'Microsoft YaHei'} </style> <div class="file"> <div class="show">Please select the file to upload</ div> <a href='javascript:void(0);'  Class="blueButton">Select File</a> <input type="file" class="myFileUpload" /> </div> <script src="//cdn.staticfile.org/ jquery /1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $(".myFileUpload").change(function(){ var arrs=$(this).val().split('\\'); console.log(arrs); var filename=arrs[arrs.length-1]; $(".show").html(filename); }); }); </script>