需用enctype="multipart/form-data"和method="post"的表单，配合<input type="file">选择文件，通过accept限制类型、JS校验大小，隐藏原生控件优化UI，XHR实现进度条，并添加hidden/select/textarea等字段传元数据。
如果您希望在网页中实现用户选择本地文件并上传至服务器的功能，则需要通过HTML表单配合特定属性来构建文件上传界面。以下是实现该功能的具体步骤：
一、创建支持文件上传的表单结构
HTML表单必须设置enctype属性为"multipart/form-data"，否则浏览器不会将文件数据编码发送；同时method必须为POST，因为文件上传不支持GET方式提交。
1、使用<form>标签定义表单容器，并添加action属性指向处理上传的服务器端地址。
2、在<form>标签内添加method="post"和enctype="multipart/form-data"两个必需属性。
立即学习“前端免费学习笔记（深入）”；
3、插入<input type="file">元素，用于触发文件选择对话框；可添加multiple属性支持多文件选择。
4、添加<input type="submit">按钮，供用户提交已选文件。
二、限制上传文件类型与大小
通过accept属性可约束用户仅能选择指定MIME类型的文件，如图片或PDF；而文件大小限制需结合前端JavaScript验证与后端校验共同实现，前端仅作初步提示。
1、在<input type="file">标签中添加accept="image/jpeg,image/png,application/pdf"限定可选文件类型。
2、为<input type="file">添加id属性，例如id="uploadFile"，便于后续JS获取对象。
3、编写JavaScript监听change事件，在用户选择文件后读取files[0].size属性，与预设阈值（如5242880字节）比较。
4、若超出限制，调用alert()提示文件大小超过5MB，请重新选择，并清空input.value以重置选择状态。
三、增强用户体验的交互设计
默认的<input type="file">样式简陋且不统一，可通过隐藏原生控件、绑定点击事件到自定义按钮的方式改善视觉表现与操作反馈。
1、将<input type="file">设置为style="display:none"隐藏原始元素。
2、添加一个<button>标签，文字内容设为点击选择文件，并绑定onclick事件触发隐藏input的click()方法。
3、在input的change事件中，获取files.length并更新按钮文字为“已选择3个文件”等动态提示。
4、为按钮添加CSS类，设置背景色、圆角及hover效果，提升可点击感。
四、添加上传进度可视化反馈
使用XMLHttpRequest对象的upload.onprogress事件可实时捕获上传过程中的已传输字节数，从而驱动进度条更新，避免用户误以为操作卡死。
1、在表单submit事件中阻止默认提交行为，改用new XMLHttpRequest()发起异步请求。
2、配置xhr.upload.onprogress = function(e) { if (e.lengthComputable) { let percent = Math.round((e.loaded / e.total) * 100); } }。
3、将percent值写入页面中已定义的<div id="progressBar"><div class="bar"></div></div>内部宽度样式。
4、当xhr.onload触发时，显示上传成功，共传输12.4MB的完成提示信息。
五、服务端接收参数的HTML表单字段补充
除文件字段外，常需附带用户ID、分类标识等元数据，这些应作为普通文本字段置于同一表单中，与文件一同提交至服务器。
1、在<form>内添加<input type="hidden" name="userId" value="U78923">传递不可见的用户标识。
2、插入<select name="category">下拉菜单，选项包含“证件”、“合同”、“截图”等业务分类。
3、加入<textarea name="description" placeholder="请描述文件用途"></textarea>供用户填写备注。
4、确保所有非文件字段的name属性值在服务端解析时能被正确映射，例如PHP中通过$_POST['userId']获取隐藏值。
