javascript - To apply CssClass according to File extension -


i have 5 cssclass whom want apply them according uploaded file. if upload pdf there different class , if excel different class present accordingly. thinking switch statement have no clue how do. below input file , submit button code

  <div class="col-md-7">   <input type="file" name="file" id="filena" class="custom-file-input">   </div>         <div class="form-group">      <div class="col-md-7 col-md-offset-5">   <input type="submit" id="savebtn" value="save" name="actiontype" class="btn-class btn-success">   <input type="submit" id="updatebtn" value="update" name="actiontype" class="btn-class btn-success">      </div>   </div> 

and below css class name in want apply them

<td><i class=""></i></td> 

and class value word file be: "fa fa-file-word-o text-primary asseticon" , pdf: "fa fa-file-pdf-o text-danger asseticon" please if clue

as mentioned in comments have file extension i'll miss part out:

var fileextension = 'pdf';  var classlist = 'fa asseticon '; /* base classes */    /* append custom classes base classses dependant on current value of "fileextension" */  switch(fileextension) {      case 'pdf':          classlist += 'fa-file-pdf-o text-primary';          break;      case 'doc':          classlist += 'fa-file-word-o text-danger';          break;      default:          console.log('invalid file type.')  }    /* select target element , apply classes */  document.getelementbyid('target').classname = classlist;
body {    font-size: 40px !important;  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">    <td><i id="target" class=""></i></td>

if ever have 2 possible file types replace switch 1 liner using ternary operator:

var fileextension = 'doc';  var classlist = 'fa asseticon '; /* base classes */    /* append custom classes base classses dependant on current value of "fileextension" */  classlist += (fileextension === 'pdf') ? 'fa-file-pdf-o text-primary' : 'fa-file-word-o text-danger'    /* select target element , apply classes */  document.getelementbyid('target').classname = classlist;
body {    font-size: 40px !important;  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">    <td><i id="target" class=""></i></td>


Comments