根据文件扩展名应用CssClass

To apply CssClass according to File extension

本文关键字：应用 CssClass 扩展名 文件      更新时间：2024-01-21

我有五个cssclass，我想根据我上传的文件将它们应用到他们。如果我上传Pdf，那么有不同的类，如果它是excel，那么相应地会出现不同的类。我想做切换语句，但我不知道该怎么做。下面是我的输入文件和提交按钮代码

  <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 AssetCon"对于PDF："fa fa-file-PDF-o文本危险资产图标"如果有任何线索，请提供帮助

正如你在评论中提到的，你已经有了文件扩展名，我会错过这一部分：

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>

相关文章：