JavaScript文件上传删除按钮对齐异常：位置随文件名长度偏移

这个问题我太熟了！你现在靠空格和省略号来调整按钮位置，这肯定会跟着文件名长度乱跑——毕竟字符占位的宽度完全不固定，文件名长一点第一列就被撑宽，按钮自然就偏移了。咱们换用CSS布局来彻底解决，两种方案任你选：

方案1：改造现有表格布局 #

给表格加固定的列宽控制，让文件名列占满剩余空间，按钮列固定宽度且靠右对齐，同时文件名过长时自动显示省略号，不会撑爆布局：

首先加CSS样式：

.file-list-table {
  width: 100%;
  border-collapse: collapse;
}
/* 文件名列占满除按钮外的所有宽度 */
.file-list-table td:first-child {
  width: calc(100% - 80px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 长文件名显示省略号 */
}
/* 按钮列固定宽度，靠右对齐 */
.file-list-table td:last-child {
  width: 80px;
  text-align: right;
}

然后修改你的JavaScript代码，删掉那些没用的   ...，直接在第二列放删除按钮：

var filelist = new Array();
updateList = function () {
  var input = document.getElementById('fileUploader');
  var output = document.getElementById('divFiles');
  var HTML = "<table class='file-list-table'>";
  for (var i = 0; i < input.files.length; ++i) {
    filelist[i] = input.files.item(i).name;
    // 直接添加删除按钮，绑定索引用于删除
    HTML += `<tr><td>${filelist[i]}</td><td><button onclick='deleteFile(${i})'>删除</button></td></tr>`;
  }
  HTML += "</table>";
  output.innerHTML = HTML;
}

// 补充删除函数（记得根据你的实际需求调整）
function deleteFile(index) {
  filelist.splice(index, 1);
  // 这里如果需要同步更新文件选择器的话，因为FileList是只读的，通常需要用自定义数组管理上传文件
  updateList(); // 删除后重新渲染列表
}

方案2：用更灵活的Flex布局（推荐） #

表格布局虽然能用，但Flex布局更现代、更灵活，完全不需要担心列宽问题：

先加CSS样式：

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0;
  padding: 6px;
  border-bottom: 1px solid #eee;
}
.file-name {
  flex: 1;
  margin-right: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-item button {
  flex-shrink: 0; /* 按钮不会被压缩 */
}

然后重写JavaScript的列表渲染逻辑：

var filelist = new Array();
updateList = function () {
  var input = document.getElementById('fileUploader');
  var output = document.getElementById('divFiles');
  output.innerHTML = ''; // 先清空容器
  
  for (var i = 0; i < input.files.length; ++i) {
    filelist[i] = input.files.item(i).name;
    
    // 创建单个文件项的容器
    var fileItem = document.createElement('div');
    fileItem.className = 'file-item';
    
    // 文件名元素
    var fileNameEl = document.createElement('span');
    fileNameEl.className = 'file-name';
    fileNameEl.textContent = filelist[i];
    
    // 删除按钮
    var deleteBtn = document.createElement('button');
    deleteBtn.textContent = '删除';
    // 用闭包保存当前索引，避免循环绑定的索引问题
    deleteBtn.onclick = (function(index) {
      return function() {
        deleteFile(index);
        updateList();
      }
    })(i);
    
    // 组装元素
    fileItem.appendChild(fileNameEl);
    fileItem.appendChild(deleteBtn);
    output.appendChild(fileItem);
  }
}

function deleteFile(index) {
  filelist.splice(index, 1);
  // 根据你的上传逻辑，这里可能需要处理实际的文件对象
}

两种方案的核心都是用CSS布局属性控制位置，而不是依赖字符填充，这样不管文件名多长，删除按钮都会稳稳地固定在右侧，再也不会偏移啦！

内容的提问来源于stack exchange，提问作者Kavitha Prabhu