H5开发：使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表
需求描述
- 使用H5、CSS、JS、JQUERY
- 点击添加图片按钮，从本地选择图片（同名图片不可重复选择），在页面预览选中的图片
- 点击图片查看大图，点击图片右上角“×”删除此图
- 点击“提交”按钮，上传选中的图片文件
实现思路
首先实现页面的静态布局，再实现页面的交互逻辑
页面布局
页面大致划分为3块：
① 功能标题、已选择图片数量/选择上限值提示
② 预览图片列表、添加图片按钮
③ 提交按钮
当选择的图片数量超过一行能显示的6张时需要自动换行，可使用float布局实现页面逻辑
页面的功能大致有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拉取代码
H5开发：使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表相关推荐
- html上传头像及预览,js实现头像上传并且可预览提交
在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览, 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是, ...
- js产品360度旋转预览图片插件
下载地址 纯js实现的产品360度旋转预览图片插件.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. dd:
- JS实现上传图片的三种方法并实现预览图片功能
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面: 另一种思路是,直接在本地 ...
- (008)前端css,js,Jquery,Servlet入门
摘要:本周的学习内容是前端的css,js,Jquery,Servlet的入门; 文章目录 1 CSS 1.1 CSS入门以及使用方式 1.2 CSS的选择器(重点) 1.3 css的样式属性 1.3. ...
- html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目
前言 就在几天前,在b站的某博主那里看见了一个面试的模拟,意外看到那个同学有一个todoList的项目 很显然,这个项目就和本次我所要展示的项目代码原理一致,但是界面上我这个就会不太美观. 知识点 本 ...
- 基于HTML+CSS+JS+JQuery的京东商城
基于HTML+CSS+JS+JQuery的京东商城 包含京东商城首页,商品详情页,购物车页,订单确认页,结算页面,登录页,注册页. 项目截图 注册页面,有正则表达式验证,验证码则为6位随机数,注册成功 ...
- HTML+CSS+JS+Jquery面试题
HTML+CSS+JS+Jquery面试题 1.CSS中 link 和@import 的区别 Link属于HTML标签,@import是css提供的,只能用来加载css 页面加载时link会同时加载, ...
- h5 img js 点击图片放大_H5实现移动端图片预览：手势缩放， 手势拖动，双击放大......
查看示例效果: 一.功能介绍 图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式 自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
- JS使用H5实现图片预览
上传图片实现预览的功能,以下是代码的实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
最新文章
- 数据库集群和高可用解决方案
- 解决win下安装wordcloud出错问题
- BASIC-6 杨辉三角形
- list转datatable
- show index mysql_MySQL SHOW INDEX语法的实际应用
- 李洪强-C语言5-函数
- 行内块元素（HTML、CSS）
- jmeter录制 过滤_Jmeter录制pc脚本
- 打印机可以打印不能扫描怎么弄_惠普打印机可以复印不能扫描怎么操作
- 叉乘点乘混合运算公式_数学公式总结人教版初一上册
- Excel 组及分级显示制作教程
- 【ps功能精通】6.钢笔工具
- 2022年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
- 【解决方案】关于自动生成表hibernate_sequence的问题
- 【arduino 问题记录】 psram: PSRAM ID read error: 0xffffffff
- PHP 基本语句
- MySQL运维篇之Mycat分片规则
- android仿支付宝弹窗,实现支付宝支付从底部弹窗效果
- 阿里云APP产品功能及使用介绍
- （附源码）springboot毕业论文管理系统 毕业设计 030946