文件上传验证：选中文件时实现JPEG格式与分档大小校验及交互逻辑

所有功能以原生文件选择元素为开发载体，当用户选中待上传文件时，自动触发全量校验并展示对应反馈，需严格落地以下规则：

核心校验逻辑 #

• JPEG格式真实性校验：验证选中文件是否为真实有效的JPEG格式，校验不通过时，在输入框下方展示红色提示文本 Error: Please upload only a jpeg file.
• 文件大小分档校验：按照文件实际大小匹配对应反馈档位：
  • 文件大小小于10Mb：满足基础大小要求
  • 文件大小处于10Mb-15Mb区间：展示橙色警告提示 Warning: File size should ideally be less than 10Mb. Try reducing the file size?
  • 文件大小大于15Mb：展示红色错误提示 Error: Please upload a file less than 15 Mb in size and ideally less than 10 Mb in size.

展示与交互规则 #

• 多提示排序要求：若同时触发多项错误、警告提示，必须严格按照「JPEG格式校验结果在前、文件大小校验结果在后」的顺序垂直排列展示，不得调换顺序。
• 校验通过交互：若文件同时通过两项校验规则，需展示绿色 Success! 成功提示，同步展示已选中的文件名；在文件名右侧配置红色叉号图标，点击该图标可将文件选择输入框恢复为初始"Select file"按钮状态，清空已选文件与所有残留提示。
  开发需匹配已确认的交互设计规范，基于现有基础实现的框架完成迭代，输出符合全部要求的完整可运行逻辑。

内容的提问来源于stack exchange，提问作者Niti pandey