JavaScript实现文件上传预处理：文件名获取与重复检测

在网页开发中，经常需要处理用户通过`<input type="file">`元素上传的文件。在这个HTML和JavaScript代码片段中，主要关注如何获取上传文件的文件名和扩展名，以便进行后续的操作，如检查文件重复、限制文件类型或大小等。 1. 文件名获取函数 (`getFileName(obj)`): 这个函数的主要目的是从用户选择的文件路径中提取文件名。它通过查找输入字段（`obj.value`）中的最后一次出现斜杠（"/"）的位置，确定文件路径的结束位置，然后使用`substring()`方法获取从该位置之后的所有字符，即文件名。返回的文件名可能不包含完整的路径，仅保留文件部分。 2. 文件扩展名获取函数 (`getFileExt(obj)`): 通过正则表达式`obj.value.replace(/.+./,"")`，这个函数从文件路径中删除所有文本直到文件名末尾，只留下最后一个`.`字符前面的部分，即文件的扩展名。这里的`/.\+/`匹配任何字符序列，直到遇到`.`为止。 3. 显示文件信息函数 (`showInfo(obj)`): 当用户选择文件时，这个函数被调用。它首先调用`getFileName()`和`getFileExt()`函数分别获取文件名和扩展名，然后将这两个值分别设置到HTML页面上两个具有`id`属性为"filename"和"fileext"的 `<div>` 元素中，显示给用户或用于进一步处理。 4. HTML结构: 页面包含一个`<input type="file">`元素，其`name`属性为"file1"，当用户选择文件后，`onChange`事件触发`showInfo()`函数，实时更新页面上的文件名和扩展名信息。这使得开发者能够轻松地检查用户上传文件的详细信息，比如文件名和类型，从而实现对文件上传的控制，如避免重复上传或者验证文件格式。 总结来说，这段代码提供了一种基础的前端文件上传处理方式，通过JavaScript动态获取并展示用户选择文件的基本信息，这对于构建一个功能丰富的文件上传表单或管理系统是十分有用的。在实际应用中，可能还需要添加更多的验证逻辑，如检查文件大小、类型，或者将这些信息发送到服务器进行进一步处理。