Question

我有五个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 AssetIcon” 对于PDF：“fa fa-file-pdf-o text-danger AssetIcon” 如有任何线索请帮忙

Answer 1

正如您在评论中提到的那样，您已经拥有文件扩展名，我将会错过这一部分：

＆＃13;

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;

＆＃13;

body {
  font-size: 40px !important;
}

＆＃13;

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

＆＃13;

如果您只有两种可能的文件类型，可以使用三元运算符替换交换机：

＆＃13;

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;

＆＃13;

body {
  font-size: 40px !important;
}

＆＃13;

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

＆＃13;

根据文件扩展名

1 个答案: