略有瑕疵，凑合能用，先当个笔记了，以后有更好的再换。
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隐藏域，然后用表单提交。）