修改jQuery脚本实现表格多行录制音频存入对应file输入框

修改思路 #

核心是遍历所有表格行，针对每行单独处理对应的音频标签和文件输入框，避免原脚本只选中第一行的问题。关键是用jQuery的.each()循环绑定行内元素，确保每行的音频都能对应到自身的文件输入框。

修改后的完整脚本 #

$(document).on('submit', 'form', function(e) {
    // 遍历表格中所有动态添加的行（根据实际表格选择器调整，比如你的表格类/id）
    $('table tr').each(function() {
        const $row = $(this);
        // 找到当前行内的audio标签和对应的file输入框
        const $audio = $row.find('audio');
        const $fileInput = $row.find('input[type="file"]');

        // 跳过没有音频或没有文件输入框的行
        if (!$audio.length || !$fileInput.length) return;

        const audioSrc = $audio.attr('src');
        if (!audioSrc) return;

        // 把audio的src转成Blob，再创建File对象
        fetch(audioSrc)
            .then(response => response.blob())
            .then(blob => {
                // 创建File对象，文件名可自定义
                const audioFile = new File([blob], 'recorded-audio.wav', { type: blob.type });
                // 用DataTransfer模拟文件选择，赋值给file输入框
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(audioFile);
                $fileInput[0].files = dataTransfer.files;
            })
            .catch(err => console.error('处理音频文件失败:', err));
    });
});

关键细节说明 #

• 行遍历：用$('table tr').each()遍历所有行，替换原脚本中直接选择$('audio')和$('input[type="file"]')的全局选择器，确保每行元素单独处理。
• 行内元素定位：用$row.find()在当前行内查找元素，避免跨行选中其他元素，适配动态添加的行（不管是初始行还是后来添加的，只要在表格里都会被遍历）。
• 文件赋值逻辑：因为直接修改file输入框的value属性受浏览器安全限制，所以用DataTransfer对象来模拟文件选择操作，这是标准的可行方案。
• 容错处理：跳过没有音频或文件输入框的行，避免报错影响其他行处理。

适配你的实际结构 #

如果你的表格或元素有特定的类名/ID，需要调整选择器：

• 比如表格有dynamic-audio-table类，就把$('table tr')改成$('table.dynamic-audio-table tr')
• 如果音频标签有特定类，比如recorded-audio，就把$row.find('audio')改成$row.find('audio.recorded-audio')

内容的提问来源于stack exchange，提问作者Abdulla Salimov