-
Notifications
You must be signed in to change notification settings - Fork 13
/
upload-multiple-file.html
136 lines (117 loc) · 5.23 KB
/
upload-multiple-file.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上传多张图片</title>
<style type="text/css" media="screen">
.upload-pic{ width: 120px; height: 30px; line-height: 30px; border-radius: 4px; color: #fff; position: relative; cursor: pointer;
font-size: 14px; background-color: #44b549; text-align: center; display: inline-block;
vertical-align: middle; margin-left: 8px; margin-top: 8px; }
.upload-pic .up-lab,.upload-pic .up-file{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; overflow: hidden;}
.upload-pic .up-lab{ background-color: #44b549; cursor: pointer; }
.upload-pic .up-file{ z-index: 1;}
.group-coms-pic{ padding-top: 30px; overflow: hidden; }
.group-coms-pic .item{ width: 116px; height: 148px; border:1px solid #f0f0f0; position: relative; float: left;margin-right: 20px; margin-bottom: 20px; }
.group-coms-pic .pic-box{ width:118px; height:117px; border-bottom:1px solid #f0f0f0; overflow: hidden; position: relative;}
.group-coms-pic .pic-box .img{ height:117px; position: absolute; left: 50%; top: 50%;
transform:translate(-50%,-50%);}
.group-coms-pic .tk{ padding:0 9px; height: 32px; line-height: 32px; text-align: left;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #353535; font-size: 14px;}
.group-coms-pic .item .del{ width:20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; color: #fff;
background-color: #ff6982; cursor: pointer; font-style: normal; position: absolute; right: -10px; top: -10px; }
</style>
</head>
<body>
<div class="upload-pic">
<label class="up-lab" for="add-pic-btn">上传图片</label>
<input type="file" accept="image/*" multiple class="up-file" id="add-pic-btn">
</div>
<div class="group-coms-pic" id="groupTu">
<!--
<div class="item">
<div class="pic-box">
<img class="img" src="http://n4-q.mafengwo.net/s13/M00/9E/31/wKgEaVx6eymAKYK_AAU40faE3IY94.jpeg?imageMogr2%2Fthumbnail%2F%21300x166r%2Fgravity%2FCenter%2Fcrop%2F%21300x166%2Fquality%2F100">
</div>
<div class="tk">111.jpg</div>
<span class="del">x</span>
</div>
-->
</div>
<script>
//上传多个文件方法
//input file已增加multiple属性，按住ctrl可选择多图
document.getElementById("add-pic-btn").addEventListener("change",function(){
var obj = this,
length = obj.files.length,
arrTitle = []; //存标题名
_html = '';
for(var i=0; i<length; i++) {
var reader = new FileReader();
if (!reader) {
console.log('对不起，您的浏览器不支持！请更换浏览器试一下');
return
}
//存储上传的多张图片名字
arrTitle.push(obj.files[i].name)
reader.error=function(e){
console.log("读取异常")
}
//iffi语法
;(function(i){
//读取成功
reader.onload = function(e){
//console.log(e)
var _src = e.target.result;
//节点
var divItem = document.createElement('div');
divItem.setAttribute('class','item');
var divPic = document.createElement('div');
divPic.setAttribute('class','pic-box');
var img = document.createElement('img');
img.setAttribute('class','img');
img.setAttribute('src',_src);
var divTk = document.createElement('div');
divTk.setAttribute('class','tk')
var spanDel = document.createElement('span');
spanDel.setAttribute('class','del');
spanDel.setAttribute('title',arrTitle[i]);
spanDel.innerText = 'x';
divTk.innerHTML = arrTitle[i];
divItem.appendChild(divPic);
divPic.appendChild(img);
divItem.appendChild(divTk);
divItem.appendChild(spanDel);
//增加节点结构
var groupTu = document.getElementById('groupTu');
groupTu.insertBefore(divItem, groupTu.firstChild);
//增加删除节点
spanDel.onclick = function(){
removeItem(this);
return false;
};
};
})(i)
reader.onloadstart=function(){
}
reader.onprogress=function(e){
if(e.lengthComputable){
console.log("正在读取文件")
}
};
reader.readAsDataURL(obj.files[i]);
}
})
//删除图片
function removeItem(delNode){
var itemNode = delNode.parentNode,
title = delNode.getAttribute('title');
var flag = confirm("确认要删除名为："+title+"的图片？");
if(flag) {
itemNode.parentNode.removeChild(itemNode);
console.log('删除成功~')
}
return false;
}
</script>
</body>
</html>