-
Notifications
You must be signed in to change notification settings - Fork 191
/
Copy pathimage-picker.html
62 lines (59 loc) · 2.58 KB
/
image-picker.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
<!DOCTYPE html>
<html lang="zh-Hans">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Image Picker</title>
<style>
*{box-sizing: border-box;}
body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #362057; }
.card { background: white; width: 20em; height: 80vh; box-shadow: 0 0 5px hsla(0,0%,0%,0.95); border-radius: 2px;
display: flex; justify-content: flex-start; align-items: center; padding-top: 3em; flex-direction: column;}
</style>
<style>
.image-picker{ width: 100px; height: 100px; border-radius: 50%; overflow: hidden; position: relative; }
.image-picker::after{
content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%;
box-shadow: inset 0 0 5px hsla(264, 46%, 23%, 0.5); color: white;
display: flex; justify-content: center; align-items: center; cursor: pointer;
}
.image-picker:hover::after{
content:'编辑'; background: hsla(0,0%,0%,0.2);
}
.image-picker>img{ max-width: 100%; max-height: 100%; }
.image-picker>input[type=file]{ position: absolute; right:0; top: 0; width: 300%;
height: 100%; z-index: 1; cursor: pointer; opacity: 0;
}
.image-picker.uploading::after{
content:'上传中'; background: hsla(0,0%,0%,0.2);
}
.image-picker.downloading::after{
content:'处理中'; background: hsla(0,0%,0%,0.2);
}
</style>
<div class="card">
<div class="image-picker">
<img src="https://avatars0.githubusercontent.com/u/839559" width=100 height=100>
</div>
<p>点击图片编辑</p>
</div>
<script src="../lib/dom/index.js"></script>
<script src="view-source.js"></script>
<script src="../lib/image-picker/index.js"></script>
<script>
new ImagePicker({
element: document.querySelector('.image-picker'),
upload: {
url: 'https://frankfang.com/image-server/upload',
method: 'PUT',
inputName: 'file'
},
parseResponse: (response) => {
response = JSON.parse(response)
return `https://frankfang.com/image-server/upload/${response.key}`
},
fallbackImage: 'https://avatars0.githubusercontent.com/u/839559'
})
</script>
<!--百度统计-->
<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?950926001a84a4f88cd3e1c7c0bfac08"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>
</html>