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
Post a Comment