Javascript JS三文件输入表单代码简化

我有一个有三个文件输入的表单。这些输入是用css隐藏的，因为我想自定义它们，所以它们由它们的标签表示

我有一个可行的解决方案，当选择文件时，它会将文件名和文件大小附加到标签上，但它会将相同的代码重复三次

我尝试了很多for-loop/for/for-loop解决方案，但没有实现相同的功能

有人能提供一个不重复相同代码三次的解决方案吗

const file1 = document.querySelector('#file_1');

file1.addEventListener('change', (e) => {
    // Get the selected file
    const [file] = e.target.files;
    // Get the file name and size
    const { name: fileName, size } = file;
    // Convert size in bytes to kilo bytes
    const fileSize = (size / 1000).toFixed(2);
    // Set the text content
    const fileNameAndSize = `${fileName} - ${fileSize}KB`;
    document.querySelector('.file1-name').textContent = fileNameAndSize;
});

const file2 = document.querySelector('#file_2');

file2.addEventListener('change', (e) => {
    // Get the selected file
    const [file] = e.target.files;
    // Get the file name and size
    const { name: fileName, size } = file;
    // Convert size in bytes to kilo bytes
    const fileSize = (size / 1000).toFixed(2);
    // Set the text content
    const fileNameAndSize = `${fileName} - ${fileSize}KB`;
    document.querySelector('.file2-name').textContent = fileNameAndSize;
});

const file3 = document.querySelector('#file_3');

file3.addEventListener('change', (e) => {
    // Get the selected file
    const [file] = e.target.files;
    // Get the file name and size
    const { name: fileName, size } = file;
    // Convert size in bytes to kilo bytes
    const fileSize = (size / 1000).toFixed(2);
    // Set the text content
    const fileNameAndSize = `${fileName} - ${fileSize}KB`;
    document.querySelector('.file3-name').textContent = fileNameAndSize;
});

---

下面的代码段在保持代码完全相同的情况下实现了您想要的功能

for（常数i，共[1,2,3]）{
const file=document.querySelector（`file${i}`）；
file.addEventListener（'change'，（e）=>{
//获取所选文件
const[file]=e.target.files；
//获取文件名和大小
常量{name:fileName，size}=file；
//将字节大小转换为千字节
常量文件大小=（大小/1000）.toFixed（2）；
//设置文本内容
const fileNameAndSize=`${fileName}-${fileSize}KB`；
document.querySelector（`.file${i}-name`）.textContent=filename和size；
});
}

---

更好的方法是重用相同的

onChange

处理程序。您需要知道哪个

'.fileN name'

元素与哪个表单输入一起使用。实现这一点的一种方法是使用HTML5数据属性，这样您就可以在事件处理程序中将其读取为

e.target.dataSet。[您的属性\u NAME\u在此]

。不过，这需要更改HTML。

下面的代码片段在保持代码完全相同的情况下实现了您想要的功能

for（常数i，共[1,2,3]）{
const file=document.querySelector（`file${i}`）；
file.addEventListener（'change'，（e）=>{
//获取所选文件
const[file]=e.target.files；
//获取文件名和大小
常量{name:fileName，size}=file；
//将字节大小转换为千字节
常量文件大小=（大小/1000）.toFixed（2）；
//设置文本内容
const fileNameAndSize=`${fileName}-${fileSize}KB`；
document.querySelector（`.file${i}-name`）.textContent=filename和size；
});
}

---

更好的方法是重用相同的

onChange

处理程序。您需要知道哪个

'.fileN name'

元素与哪个表单输入一起使用。实现这一点的一种方法是使用HTML5数据属性，这样您就可以在事件处理程序中将其读取为

e.target.dataSet。[您的属性\u NAME\u在此]

。但这需要更改HTML。

函数validateFile（e.target，'.file1 name'）{}

函数validateFile（e.target，'.file1 name'）{}

谢谢，它能工作！我只需在变量

#file{I}

=>

#file{I}

之前添加$。很好的捕获，更新谢谢，它很有效！我只需在变量

#file{I}

=>

#file{I}

之前添加$即可。很好，更新了