图片上传 | 根据

略有瑕疵，凑合能用，先当个笔记了，以后有更好的再换。

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>

 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隐藏域，然后用表单提交。）