HTML怎么在文件上传列表中支持批量重命名-html教程-PHP中文网

浏览器原生file input无法上传前重命名文件，因file.name只读且属安全策略；需前端用new file([file], newname, {type, lastmodified})构造新实例，再传给后端。

html怎么在文件上传列表中支持批量重命名

浏览器原生 file input 不支持上传前重命名

直接用 <input type="file" multiple> 选中的文件，File 对象的 name 属性是只读的。你无法在上传前通过 JS 修改它——这不是限制，而是安全策略：防止脚本偷偷篡改用户选择的真实文件名。

想“批量重命名”，实际得走两步：前端预处理 + 后端接收新名

所谓“上传列表中支持批量重命名”，本质是让用户在点击上传前，能编辑一串待上传文件的预期名称，再把新名字连同文件内容一起发给后端。关键点在于：

不能改 File.name，但可以构造新的 File 实例（用 new File([blob], newName, {type: ...})）
必须保留原始 File.type 和 File.lastModified，否则后端校验或 MIME 解析可能出错
若需保留原始文件路径结构（如 src/img/logo.png），浏览器不提供该信息，只能靠用户手动填或服务端约定规则

简易实现：用 `Array.map()` + `new File()` 生成重命名后的文件列表

假设你已用 input.files 拿到 FileList，并渲染出可编辑的名称输入框（每个对应一个文件）：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

const files = Array.from(input.files);
const renamedFiles = files.map((file, i) => {
  const newName = document.getElementById(`name-input-${i}`).value.trim() || file.name;
  return new File([file], newName, {
    type: file.type,
    lastModified: file.lastModified
  });
});
// 之后用 FormData.append('files', renamedFile) 逐个上传

注意：new File() 第一个参数必须是 Blob 或 ArrayBuffer 等二进制源，不能传字符串；file 本身是 Blob 子类，可直接用。