ファイル拡張子

Question

に従ってCssClassを適用するにはアップロードしたファイルに従って5つのcssclassを適用したいと思います。もし私がPdfをアップロードすると、別のクラスがあり、それが優れていれば、異なるクラスがそれに応じて存在します。私はスイッチのステートメントを行うことを考えていたが、私はどのように手がかりを持っていない。以下 は私の入力ファイルで、以下のボタンのコード

<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> 

などを提出し、私はワードファイルの

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

とクラス値はなりますそれらを適用したい私のCSSクラス名である：「FA FA -fileワード-Oのテキストの主AssetIcon」 とPDFについて： 『FA FA-ファイル、PDF-Oテキスト・危険AssetIcon』 があれば手がかりが

Answer 1

あなたが既に持っているあなたのコメントで述べたように助けてくださいファイル拡張子は私が逃すだろう帽子の一部アウト：

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>

：あなたが唯一のこれまで二つの可能なファイルタイプを持っている場合は、三項演算子を使用することにより、1つのライナーを備えたスイッチを置き換えることができ

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>