-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathimage-upload.html
93 lines (82 loc) · 3.75 KB
/
image-upload.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="container">
<div id="upload-container">
<i class="fa fa-file-image-o fa-4x" aria-hidden="true"></i>
<div id="description">可拖拽上传，仅支持图片文件，大小限制200kb</div>
<div id="upload-button">选择图片上传</div>
<input id="upload-img" type="file" hidden accept="image/*">
<div id="preview">
<img>
<span>当前未选择任何文件</span>
</div>
</div>
</div>
<script>
let uploadContainer = document.body.querySelector('#upload-container');
let uploadButton = document.body.querySelector('#upload-button');
let uploadImg = document.body.querySelector('#upload-img');
let preview = document.body.querySelector('#preview');
let imgRegexp = /^image\//
let lastImgUrl = null;
const IMAGE_MAX_SIZE = 200 * 1024; //文件限制大小100kb
uploadImg.addEventListener('change', updateImgDisplay);
uploadContainer.addEventListener('drop', handleDrop);
uploadButton.onclick = () => uploadImg.click();
document.addEventListener('dragover', function (e) {
e.preventDefault();
})
document.addEventListener('drop', function (e) {
e.preventDefault();
})//禁用浏览器默认拖放事件
function returnFileSize(number) {
if (number < 1024) {
return number + 'bytes';
} else if (number >= 1024 && number < 1048576) {
return (number / 1024).toFixed(1) + 'KB';
} else if (number >= 1048576) {
return (number / 1048576).toFixed(1) + 'MB';
}
}
function handleFile(curFile) {
preview.firstElementChild.replaceWith(document.createElement('img'));//恢复初始样式
preview.lastElementChild.textContent = '当前未选择任何文件';
if (!curFile) return;
else {
if (!curFile.type.match(imgRegexp)) {
preview.lastElementChild.textContent = `所选文件不是图片:${curFile.name.replace(/(.{0,10})(.*)(\..+)/, '$1$3')}`;
return;
}
if (curFile.size > IMAGE_MAX_SIZE) {
preview.lastElementChild.innerHTML = `所选文件:${curFile.name.replace(/(.{0,10})(.*)(\..+)/, '$1$3')}<br>大小超过限制:${returnFileSize(curFile.size)}`;
return;
}
if (lastImgUrl) URL.revokeObjectURL(lastImgUrl);//创建新URL的同时把原来的删掉
lastImgUrl = URL.createObjectURL(curFile);
preview.firstElementChild.src = lastImgUrl;
preview.lastElementChild.innerHTML = `所选文件:${curFile.name.replace(/(.{0,10})(.*)(\..+)/, '$1$3')}<br>文件大小:${returnFileSize(curFile.size)}`;
}
}
function updateImgDisplay(event) {
let curFile = uploadImg.files[0];
console.log(curFile);
handleFile(curFile);
}
function handleDrop(event) {
event.preventDefault();
let curFile = event.dataTransfer.files[0];
uploadImg.files = event.dataTransfer.files;//防止拖动文件后再点击文件上传无法触发取消时的change事件
console.log(curFile);
handleFile(curFile);
}
</script>
</body>
</html>