略有瑕疵，凑合能用，先当个笔记了，以后有更好的再换。
css
1 <style>
2 /*外层div*/
3 .input-file-box{
4 border: 1px solid gray;
5 width: 5rem;
6 height: 5rem;
7 margin-left:.5rem;
8 position: relative;
9 text-align: center;
10 border-radius: 1rem;
11 }
12 /*文字描述*/
13 .input-file-box > span{
14 display: block;
15 width: 3rem;
16 height: 1rem;
17 position: absolute;
18 top: 1rem;
19 bottom: 0;
20 left: 1rem;
21 right: 0;
22 /* margin: auto; */
23 color: gray;
24 }
25 /*input框*/
26 .input-file-box #uploadfile{
27 opacity: 0;
28 width: 5rem;
29 height: 5rem;
30 cursor: pointer;
31 }
32
33 .tu{
34 /* background:yellow; */
35 }
36 #bushang{
37 min-height:10rem;
38 width:100%rem;
39 /* background:pink; */
40 }
41 #img-box{
42 /* background:purple; */
43 min-height:10rem;
44 width:100%;
45 float:left;
46 }
47 #bushang:after{
48 content: "";
49 height: 0;
50 clear: both;
51 overflow: hidden;
52 display: block;
53 visibility: hidden;
54 }
55 #img-box .pingxia{
56 height:8rem;
57 width:8rem;
58 /* float:left;
59 margin-left:.4rem;
60 margin-top:.1rem; */
61 }
62 #img-box div h1{
63 position: absolute;
64 right:0rem;
65 top:0.1rem;
66 height:1.5rem;
67 width:1.5rem;
68 }
69 #img-box div{
70 float:left;
71 margin-left:.4rem;
72 margin-top:.1rem;
73 position: relative;
74 height:8rem;
75 width:8rem;
76 }
77 #img-box .shan{
78 height:1.5rem;
79 width:1.5rem;
80 position: absolute;
81 top:0;
82 right:0;
83 z-index: 100;
84 }
85 </style>
html
<body> <form action=""> <div class="input-file-box"> <span>点击上传图片</span> <input type="file" id="uploadfile" multiple> </div> <div id="bushang"> <div id="img-box"></div> </div> </form> </body>
js
1 <script>
2 // 传图
3 var shuliang = 0
4 var shuliang111 = 0
5 $('#uploadfile').on('change',function(){
6 shuliang = shuliang + this.files.length
7 // 如果没有选择图片 直接退出
8 if(this.files.length <=0){
9 return false;
10 }
11 // 判断数量 - 上
12 if(shuliang >= 10){
13 var con=window.confirm('最多只能添加九张图片');
14 if(con==true){
15 shuliang = shuliang111
16 return;
17 }
18 else{
19 shuliang = shuliang111
20 return;
21 }
22 }
23 shuliang111 = shuliang111 + this.files.length
24 //判断数量 - 下
25 var formData = new FormData();
26 for (i = 0; i < this.files.length; i++){
27 formData.append('pic1'+'['+i+']',this.files[i]);
28 }
29 $.ajax({
30 url:'ajax上传地址',
31 type:'post',
32 data:formData,
33 cache: false, //上传文件不需要缓存
34 beforeSend:function (){
35 $("#loading").show(); //上传之前启动遮罩
36 },
37 processData: false, // 告诉jQuery不要去处理发送的数据
38 contentType: false, // 告诉jQuery不要去设置Content-Type请求头
39 dataType:'json',
40 success:function(data){
41 if(data.error == 0){
42 var c = data.info.split(",");
43 c.pop()
44 for(var i = 0;i < c.length;i++){
45 var div = document.createElement('div');
46 var h1 = document.createElement('h1');
47 console.log("这是动态渲染时候的图片路径",c[i])
48 div.innerHTML='<img class="pingxia" src="'+c[i]+'" />';
49 h1.innerHTML='<img class="shan" src="http://7niuyun.xunlongfuwu.com/20191022145616.jpg" />';
50 div.appendChild(h1)
51 document.getElementById("img-box").appendChild(div);
52 }
53 // 删除渲染的图片
54 $(".shan").click(function(){
55 shuliang = shuliang - 1;
56 shuliang111 = shuliang111 - 1;
57 var index = $('.shan').index(this)
58 $("#img-box").find("div")[index].remove()
59 })
60 $("#loading").hide(); //关闭遮罩
61 }else{
62 //不成功处理
63 $("#loading").hide();
64 }
65 }
66 })
67 })
68 </script>
先用ajax传到服务器，再根据服务器返回的地址动态渲染，最后根据需要提交。（可以在动态渲染的时候多创建一个input隐藏域，然后用表单提交。）