H5开发：使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表

需求描述

• 使用H5、CSS、JS、JQUERY
• 点击添加图片按钮，从本地选择图片（同名图片不可重复选择），在页面预览选中的图片
• 点击图片查看大图，点击图片右上角“×”删除此图
• 点击“提交”按钮，上传选中的图片文件

实现思路

首先实现页面的静态布局，再实现页面的交互逻辑

1. 页面布局
   页面大致划分为3块：
   ① 功能标题、已选择图片数量/选择上限值提示
   ② 预览图片列表、添加图片按钮
   ③ 提交按钮
   当选择的图片数量超过一行能显示的6张时需要自动换行，可使用float布局实现

2. 页面逻辑
   页面的功能大致有3点：
   ① 点击添加图片按钮选择本地图片（可使用input标签实现）
   ② 将选中的本地图片加载到页面预览（预览本地图片、JQUERY-在元素列表开头插入元素）
   ③ 增加、删除图片时更新选中图片文件列表和已选择图片数量（js数组增删操作）
   ④ 点击预览图片查看大图（实现思路：创建一个置于页面顶层的div，默认隐藏，点击预览图片时在这个div中加载图片并显示这一div）

demo

gitee网址：https://gitee.com/smm311/my-demos.git
分支名称：picupLocalPicDemo
git拉取代码

一个最菜的“全栈”，涉及H5、java、android开发，直到目前尚未规划好自己的职业生涯……
决定开始将自己从业三年的一些编程经验陆续记录下来，这是第一篇demo，哟罗西库米娜桑~

参考文档

[1] float布局
[2] input标签
[3] 预览本地图片
[4] JQUERY-在元素列表开头插入元素
[5] js数组增删操作
[6] git拉取代码