Um CssClass gemäß der Dateierweiterung

Question

anzuwenden, habe ich fünf CSSCLASS, denen ich sie gemäß meiner hochgeladenen Datei anwenden möchte. Wenn ich Pdf hochlade, dann gibt es eine andere Klasse und wenn es Excel ist, dann ist eine andere Klasse entsprechend vorhanden. Ich dachte, switch statement zu tun, aber ich habe keine Ahnung, wie es geht. Unten ist meine Eingabedatei und 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> 

Und unter dem Namen meines CSS-Klasse, in der ich sie

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

und Klassenwert für Word-Datei anwenden möchten wird sein: „fa fa -file-Wort-o Text-Primär AssetIcon“ und für PDF: "fa fa-file-pdf-o Text-Gefahr AssetIcon" Bitte helfen Sie, wenn irgendein Hinweis

Answer 1

Wie Sie in Ihren Kommentaren erwähnt, die Sie bereits haben die Dateiendung werde ich vermissen Hutteils aus:

var fileExtension = 'pdf'; 
 
var classList = 'fa AssetIcon '; /* base classes */ 
 

 
/* Append custom classes to 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 and 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>

Wenn Sie immer nur zwei mögliche Dateitypen haben Sie die Schalter mit einem Einzeiler ersetzen können mit dem ternären Operator:

var fileExtension = 'doc'; 
 
var classList = 'fa AssetIcon '; /* base classes */ 
 

 
/* Append custom classes to 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 and 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>