html+css上傳檔案控制元件美化
阿新 • • 發佈：2019-02-14
html+css美化上傳檔案控制元件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上傳檔案</title> <style> label{ display:inline-block; width:160px; height:40px; line-height:40px; text-align: center; background:#BE1A21; font-size:18px; color:#fff; cursor:pointer; } /*隱藏預設樣式*/ input[id=file]{ margin-left:-2000px; height:0; } </style> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div> <label for="file" id="upFile">上傳檔案</label> <input type="file" id="file"> </div> <div> <p id="fileName"></p> <img src="" id="fileImg"> </div> <script> $("#file").on("change",function(){ //擷取路徑，獲取上傳檔名 var urlArr = this.value.split("\\"); if (this && this.files && this.files[0]) { document.getElementById("fileName").innerHTML = urlArr[urlArr.length-1]; var fileUrl = URL.createObjectURL(this.files[0]); document.getElementById("fileImg").src = fileUrl; }else{ //相容IE9以下 document.getElementById("fileName").innerHTML = urlArr[urlArr.length-1]; document.getElementById("fileImg").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; document.getElementById("fileImg").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = this.value; } }); </script> </body> </html>
經測試IE，火狐，谷歌都正常。
最後點選上傳的樣子。如果不需要縮圖的話，自行刪減程式碼。
