如何阻止文件上传后页面刷新并实现上传图片名称展示功能

嘿，我看你现在碰到两个小问题：提交表单后页面会自动刷新，而且没法展示上传的图片名称对吧？咱们来一步步搞定它～

首先，页面刷新是因为表单默认的提交行为会触发页面跳转，所以第一步得把这个默认行为拦住。然后再处理文件上传逻辑，同时把选中的文件名展示在页面上。我把你的代码修改了一下，直接看完整实现吧：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传测试</title>
</head>

<body>
    <h1>图片上传测试</h1>
    <form id="uploadForm">
        <input type="file" id="myFiles" accept="image/*" multiple />
        <button>Submit</button>
    </form>
    <!-- 用来展示文件名的容器 -->
    <h2>已上传图片名称：</h2>
    <div id="fileNames"></div>

    <script>
        const form = document.getElementById("uploadForm");
        const fileNameContainer = document.getElementById("fileNames");

        // 绑定表单提交事件
        form.addEventListener('submit', async (e) => {
            // 阻止表单默认提交行为，避免页面刷新
            e.preventDefault();
            
            const myFiles = document.getElementById("myFiles").files;
            const formData = new FormData();
            
            // 收集文件到FormData（用于后续上传到后端）
            for (const file of myFiles) {
                formData.append('files', file);
                // 同时收集文件名并展示到页面
                const fileNameElement = document.createElement('p');
                fileNameElement.textContent = file.name;
                fileNameContainer.appendChild(fileNameElement);
            }

            // 这里可以添加文件上传到后端的逻辑，比如：
            // try {
            //     const response = await fetch('/upload', {
            //         method: 'POST',
            //         body: formData
            //     });
            //     const result = await response.json();
            //     console.log('上传成功', result);
            // } catch (error) {
            //     console.error('上传失败', error);
            // }
        });
    </script>
</body>

</html>

我给你划几个关键要点：

• 阻止页面刷新：在表单的submit事件回调里调用e.preventDefault()，这是核心操作，直接拦住了默认的页面跳转行为。
• 展示文件名：我新增了div#fileNames作为文件名的展示容器，遍历选中的文件列表时，每拿到一个文件就创建一个<p>标签，把文件名塞进去再添加到容器里，这样就能清晰展示所有上传的图片名称了。
• 文件上传逻辑：把原来的Object.keys遍历改成了for...of循环，写法更直观易读。如果需要把文件传到后端，只需要把注释里的fetch请求逻辑解开即可。

要是你不想用单独的div容器，也可以直接把文件名拼接到<h2>标签里，比如用fileNameContainer.textContent += file.name + ' '，不过用标签逐个展示会更整洁美观～

备注：内容来源于stack exchange，提问作者test1229