在 HTML5/JS 中,可以使用 File API 和 FileReader API 来读取和显示多个文件输入。具体步骤如下:
multiple
属性将输入框设置为多文件输入,例如:<input type="file" id="files" multiple>const reader = new FileReader();
reader.onload = function(e) {
const data = e.target.result;
// 处理数据
};
reader.readAsArrayBuffer(file);const data = new DataView(arrayBuffer);
// 处理数据const template = `
<div>
<p>文件名: {{ fileName }}</p>
<p>文件类型: {{ fileType }}</p>
<p>文件内容: {{ fileContent }}</p>
</div>
`;
const templateElement = document.createElement('template');
templateElement.innerHTML = template;
const fragment = templateElement.content;
const elements = fragment.querySelectorAll('div');
elements.forEach((element, index) => {
element.innerHTML = data.subarray(index * 1024, (index + 1) * 1024);
});const table = document.createElement('table');
table.innerHTML = `
<thead>
<tr>
<th>文件名</th>
<th>文件类型</th>
<th>文件内容</th>
</tr>
</thead>
<tbody>
${files.map(file => `
<tr>
<td>${file.name}</td>
<td>${file.type}</td>
<td>${file.data}</td>
</tr>
`).join('')}
</tbody>
</table>
`;
document.body.appendChild(table);通过以上步骤,可以在 HTML5/JS 中实现多文件输入和显示。需要注意的是,由于浏览器的限制,一次性读取的文件数量和服务器性能等因素可能会影响用户体验。领取专属 10元无门槛券
手把手带您无忧上云