前言
图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：
后台接参
复制粘贴
页面操作，使用Ctrl C、 V 效果也一样
后台接参
鼠标拖拽
页面操作
后台接参
show the code
代码与之前的博客变化不大，主要是将p标签换成了img标签并且调整好样式，input加入了格式校验，使用window.URL.createObjectURL进行图片的预览等等，更多细节请直接看对比之前的代码与现在的代码
注：项目用到了bootstrap、layer、thymeleaf，需要先引入相关文件
css
注意：样式在父页面引入
.nav-bar { border-top: 1px solid #9E9E9E; margin: 10px 0 20px; } .nav-bar-title { margin: -13px 0 0 35px; background-color: white; padding: 0 10px; float: left; color: #199ED8; } .images-remove { font-size: 25px; color: red; cursor: pointer; position: relative; right: 0px; top: -15px; } .images-text-img { float: left; height: 100px; width: 100px; border: 1px solid #c2cad8; margin-bottom: 5px; } .images-text-img + i { float: left; line-height: 30px !important; } .input-images { width: 90% !important; padding: 4px 12px !important; } .images-list { border: 1px solid #c2cad8; padding: 10px; width: 400px; height: 355px; overflow: auto; }
imagesUpLoad.html
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><body><div th:fragment="imagesPage(applyId)"
