美化input文件上传按钮

朴灿烈づ我的快乐病毒、 2022-05-13 13:36 452阅读 0赞

效果演示：

70 

  1. <!-- /**
  2.  * @Author: Ding Jianlong
  3.  * @Date:   2018-09-21 13:25:05
  4.  * @Last Modified by:   Ding Jianlong
  5.  * @Last Modified time: 2018-10-24 15:47:13
  6.  */ -->
  7. <!DOCTYPE html>
  8. <html lang="zh-CN">
  9. <head>
  10.     <meta charset="UTF-8">
  11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  13.     <title>美化文件上传按钮</title>
  14.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  15.     <style>
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="container">
  21.         <h3>美化文件上传按钮</h3>
  22.         <label for="upVideo">
  23.             <div id="upVideoBtn" class="btn" type="button">选择视频</div>
  24.         </label>
  25.         <input id="upVideo" style="display:none" type="file" accept="video/mp4,audio/mp4" name="upVideo">
  26.     </div>
  28. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  29. <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
  30. <script>
  31.     $('#upVideo').on('change',function(){
  32.         //alert($('#upVideo').val());  //绝对路径
  33.         //分割成数组，提取文件名
  34.         var arr = $('#upVideo').val().split('\\');
  35.         var fileName = arr[arr.length-1];
  36.         $('#upVideoBtn').text(fileName);
  37.         $('#upVideoBtn').attr('class','btn btn-success');
  38.         if(!fileName){
  39.             $('#upVideoBtn').text('选择视频');
  40.             $('#upVideoBtn').attr('class','btn');
  41.         }
  42.     });
  43. </script>
  44. </body>
  45. </html>

发表评论

表情：
评论列表 （有 0 条评论，452人围观）

还没有评论，来说两句吧...

相关阅读