javascript - 根据文件扩展名应用CssClass

Question

我有五个 cssclass，我想根据我上传的文件应用它们。如果我上传 Pdf，则有不同的类，如果是 excel，则相应地存在不同的类。我正在考虑做 switch 语句，但我不知道该怎么做。下面是我的输入文件和提交按钮代码

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

下面是我想要应用它们的 css 类名

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

Word 文件的类值为:“fa fa-file-word-o text-primary AssetIcon”对于 PDF:“fa fa-file-pdf-o text-danger AssetIcon”如果有任何线索请帮忙

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

如果您只有两种可能的文件类型，您可以使用三元运算符将开关替换为单行:

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>