美化input檔案上傳按鈕
阿新 • • 發佈：2018-12-15
效果演示：
<!-- /** * @Author: Ding Jianlong * @Date: 2018-09-21 13:25:05 * @Last Modified by: Ding Jianlong * @Last Modified time: 2018-10-24 15:47:13 */ --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>美化檔案上傳按鈕</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <style> </style> </head> <body> <div class="container"> <h3>美化檔案上傳按鈕</h3> <label for="upVideo"> <div id="upVideoBtn" class="btn" type="button">選擇視訊</div> </label> <input id="upVideo" style="display:none" type="file" accept="video/mp4,audio/mp4" name="upVideo"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> <script> $('#upVideo').on('change',function(){ //alert($('#upVideo').val()); //絕對路徑 //分割成陣列，提取檔名 var arr = $('#upVideo').val().split('\\'); var fileName = arr[arr.length-1]; $('#upVideoBtn').text(fileName); $('#upVideoBtn').attr('class','btn btn-success'); if(!fileName){ $('#upVideoBtn').text('選擇視訊'); $('#upVideoBtn').attr('class','btn'); } }); </script> </body> </html>