在cursor中需手写html搭建图片上传页：创建index.html，补全doctype、lang="zh-cn"、meta charset和title；表单设enctype="multipart/form-data"，input[type=file]加accept="image/*"；用js监听change事件生成预览图，并配静态提示文字；最后用python起本地服务测试。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Cursor中快速搭建一个支持图片上传的HTML页面，需要手动编写基础结构并确保表单能正确提交文件。Cursor本身不提供可视化拖拽组件，所有代码必须手写或借助AI生成后手动调整。
创建基础HTML结构
新建一个index.html文件，在Cursor中右键→New File→输入index.html→回车确认。
在文件顶部输入，换行后输入<code>，再嵌套和标签。这一步漏掉lang="zh-CN"可能导致部分屏幕阅读器识别异常。
在内添加<meta charset="UTF-8">和<title>图片上传页面</title>，缺一不可，否则中文可能乱码或标题不显示。
插入带校验的文件上传表单
在内部写一个<form></form>标签，设置enctype="multipart/form-data"——【没有这个属性，后端根本收不到文件二进制流】。
表单内添加<input type="file" accept="image/*" required>，其中accept="image/*"能让手机相册直出图片选项，不加的话iOS会默认弹出“选择文件”全类型列表。
补上<button type="submit">上传图片</button>，不要用<input type="submit">，前者更易通过CSS定制样式且语义更清晰。
添加前端简易预览功能
方法一：用JavaScript实时显示缩略图
Agents 正在你的整个代码库中处理越来越复杂、运行时间更长的任务。本次版本引入了新的 agent 框架改进，以实现更好的上下文管理，并在编辑器和 CLI 中带来了许多提升使用体验的修复。
在底部添加<script></script>标签，里面写：监听input的change事件→获取files[0]→用URL.createObjectURL()生成临时地址→赋值给一个<img id="preview">的src属性。
方法二：纯HTML fallback（无JS时可用）
在form下方加一行提示文字：<p>支持JPG、PNG、WebP格式，单张不超过5MB</p>。这行文字虽不能阻止超大文件上传，但能降低用户误操作概率。
在form内部<input>后面紧跟<img id="preview" style="max-width:90%">，display:none确保JS未运行时不占布局空间。
配置本地测试环境
第一步：在项目根目录打开终端（Cursor顶部菜单Terminal→New Terminal）。
第二步：执行python3 -m http.server 8000启动静态服务——【不能直接双击打开HTML，否则file input在Chrome中会因跨域限制无法读取本地路径】。
第三步：浏览器访问http://localhost:8000，点击上传按钮，选一张图片，观察是否在页面下方出现预览图。
