<input type="file" name="feedbackFile" id="feedbackFile">怎么做美化，并且可以显示文件名

您可以通过以下方式美化上传文件的 input 元素，并显示上传的文件名：

1. 隐藏默认样式的 input 元素

input[type="file"] {
  display: none;
}

2. 使用样式更好看的 label 元素代替 input 元素

<label for="feedbackFile" class="file-label">
  <i class="fa fa-upload"></i>
  选择文件
</label>
<input type="file" name="feedbackFile" id="feedbackFile">

3. 监听文件选择事件，获取文件名并显示

var fileInput = document.getElementById('feedbackFile');
var fileLabel = document.querySelector('.file-label');

fileInput.addEventListener('change', function() {
  var fileName = this.value.split('\\').pop(); // 获取文件名，去掉路径
  fileLabel.innerText = fileName || '选择文件'; // 如果没有选择文件，则显示默认文本
});

4. 美化 label 元素的样式

.file-label {
  display: inline-block;
  padding: 10px;
  color: #fff;
  background: #007bff;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
}

.file-label:hover {
  background: #0062cc;
}

.fa-upload {
  margin-right: 5px;
}

这样，您就可以美化上传文件的 input 元素，并在用户选择文件后显示文件名了。