html中文件上传核心是，需配合method="post"、enctype="multipart/form-data"及name属性；支持accept和multiple提升体验；自定义样式应避免display:none，推荐label包裹或透明覆盖；上传须用formdata封装文件。

HTML里让用户选择本地文件，核心就靠 <input type="file"> —— 这是浏览器唯一合法、安全的触发方式，不能绕过、不能模拟、也不能直接赋值。

基础写法与必要属性

一个能真正上传文件的表单，三样东西缺一不可：

• form 的 method 必须是 post：文件数据量大，GET 不适用；
• form 的 enctype 必须是 multipart/form-data：这是二进制文件能被正确编码发送的关键，漏掉它，文件内容根本传不到后端；
• input type="file" 要有 name 属性：后端靠这个名字（比如 name="avatar"）来接收文件，没 name 就等于没提交。

示例代码：

  
  上传头像

限制类型和多选支持

提升体验和减少无效提交，两个属性很实用：

• accept：告诉浏览器“只显示这些类型的文件”。例如：accept="image/*" 显示所有图片，accept=".pdf,.docx" 只显示 PDF 和 Word 文档。注意：这只是前端提示，不能替代后端校验；
• multiple：加了它，用户就能按 Ctrl/Cmd 或拖拽选多个文件，input.files 会变成一个 FileList 对象，而不是单个 File。

带限制的写法：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

自定义按钮样式（别用 display: none）

原生文件输入框样式难看，但直接隐藏它（比如 display: none）会导致 JS 调用 click() 失效——这是浏览器的安全策略。

可靠做法有两种：

• 用 label 包裹 input：<label><input type="file">点击上传</label>，点文字就等于点 input；
• 透明覆盖法：把 input 设置为 opacity: 0; position: absolute;，再用一个好看的按钮定位在它上面，用户实际点的是按钮，但事件穿透到 input。

获取文件后怎么发给服务器？

选完文件后，input.files 是只读的 FileList，不能直接 fetch 或 axios 发送。必须用 FormData 包一层：

const input = document.querySelector('input[type="file"]');
const file = input.files[0];
const formData = new FormData();
formData.append('myfile', file); // 名字要和后端约定一致
fetch('/upload', { method: 'POST', body: formData });

注意：不要试图把文件转成 base64 或 Blob 直接发，既增加体积又破坏标准流程；FormData 才是服务端解析 multipart 数据的预期格式。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！