我是靠谱客的博主 自信往事,这篇文章主要介绍选择图片后显示缩略图(自动生成缩略图),现在分享给大家,希望可以做个参考。

参考:使用drop实现点击和拖放选择/上传文件

下面是完整代码,看注释:

复制代码
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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示选择图片的缩略图</title> <style> #dropbox { width: 400px; height: 70px; line-height: 70px; text-align: center; border: 2px dashed #999; border-radius: 5px; background: #fbfbfb; color: #666; } #preview>img { height: 80px; margin: 7px; border: 1px solid #666; border-radius: 4px; box-shadow: 3px 3px 3px #bbb; } #outbox{ display: inline-block; position: relative; overflow: hidden; } #imgUpload{ position: absolute; left: 0px; font-size: 60px; opacity: 0; } </style> </head> <body> <div id="outbox"> <div id="dropbox"> <input id="imgUpload" type="file" multiple> <span>点击或将单个/多个图片拖放到此处</span> </div> </div> <div id="preview"></div> <script> var dropbox, imgUpload; dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("dragleave", dragleave, false); dropbox.addEventListener("drop", drop, false); imgUpload = document.getElementById("imgUpload"); imgUpload.addEventListener("change", readFile, false) // 目标进入drop区域 function dragenter(e) { e.stopPropagation(); e.preventDefault(); dropbox.style.background = '#666' } // 目标位于drop区域上方 function dragover(e) { e.stopPropagation(); e.preventDefault(); } // 目标离开drop区域 function dragleave(e) { e.stopPropagation(); e.preventDefault(); dropbox.style.background = '#fbfbfb'; } // 目标在drop区域被释放/放置(松开鼠标) function drop(e) { e.stopPropagation(); e.preventDefault(); dropbox.style.background = '#fbfbfb'; var dt = e.dataTransfer; var files = dt.files; handleFiles(files); } // 点击上传文件后的方法 function readFile() { handleFiles(this.files); } // 显示缩略图的方法 function handleFiles(files) { for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /^image//; // 自动过滤非图片文件 if (!imageType.test(file.type)) { continue; } // 创建img对象并加入到页面中 var img = document.createElement("img"); preview.appendChild(img); var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img); } } </script> </body> </html>

最后

以上就是自信往事最近收集整理的关于选择图片后显示缩略图(自动生成缩略图)的全部内容,更多相关选择图片后显示缩略图(自动生成缩略图)内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(101)

评论列表共有 0 条评论

立即
投稿
返回
顶部