1. 程式人生 > 實用技巧 >input file修改預設樣式

input file修改預設樣式

效果圖:

HTML:

<a href="javascript:;" class="file">
    <span>選擇apk</span>
    <input type="file" name="file" multiple="multiple" />
</a>

CSS:

/*input flie css美化*/
.file {  font-size:0.8em; position:relative; display:inline-block; background:#fe770a; border-radius:1em; padding:0
.3em 1em; overflow:hidden; color:#fff; text-decoration:none; text-indent:0; cursor:pointer; } .file input { position:absolute; font-size:100px; right:0; top:0; opacity:0; } .file:hover { background:#ffa55d;color:#fff; text-decoration:none;} .file span{ max-width:6em; overflow:hidden; display:block; white-space:nowrap; text-overflow:ellipsis; } .fileerrorTip,.showFileName{ color:#fe0000; font
-size:0.9em; padding:0 0 0 0.5em; } .showFileName{ color:#fe770a; }

JS:

//上傳檔案
$(".file").on("change","input[type='file']",function(){
  var filePath=$(this).val();
  $(".file span").html(filePath);
  if(filePath.indexOf("apk")!=-1 ){
      $(".fileerrorTip").html("").hide();
      var arr=filePath.split('
\\');       var fileName=arr[arr.length-1];       $(".showFileName").html(fileName);   }else{       $(".showFileName").html("");       $(".fileerrorTip").html("這他媽是APK嗎??").show();       return false   } })