layui-图片上传，可使用选择图片->上传图片，预览图片，删除图片（转载）

亦凉 2022-05-11 00:50 748阅读 0赞

原文地址：https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13

1.  `<!DOCTYPE html>`
2.  `<html>`
3.   
4.  `<head>`
5.  `<meta charset="utf-8">`
6.  `<title>layui</title>`
7.  `<meta name="renderer" content="webkit">`
8.  `<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">`
9.  `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">`
10. `<link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all">`
11. `<style>`
12. `.layui-upload .mark_button {`
13. `position: absolute;`
14. `right: 15px;`
15. `}`
16.  
17. `.upload-img {`
18. `position: relative;`
19. `display: inline-block;`
20. `width: 300px;`
21. `height: 200px;`
22. `margin: 0 10px 10px 0;`
23. `transition: box-shadow .25s;`
24. `border-radius: 4px;`
25. `box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.5);`
26. `transition: 0.25s;`
27. `-webkit-transition: 0.25s;`
28. `margin-top: 15px;`
29. `}`
30.  
31. `.layui-upload-img {`
32. `width: 300px;`
33. `height: 200px;`
34. `border-radius: 4px;`
35. `}`
36.  
37. `.upload-img:hover {`
38. `cursor: pointer;`
39. `box-shadow: 0 0 4px rgba(0,0,0,1);`
40. `transform: scale(1.2);`
41. `-webkit-transform: scale(1.05);`
42. `}`
43.  
44. `.upload-img input {`
45. `position: absolute;`
46. `left: 0px;`
47. `top: 0px;`
48. `}`
49.  
50. `.upload-img button {`
51. `position: absolute;`
52. `right: 0px;`
53. `top: 0px;`
54. `border-radius: 6px;`
55. `}`
56. `</style>`
57. ``
58. `</head>`
59.  
60. `<body>`
61.  
62. `<div class="layui-upload ">`
63.  
64. `<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">`
65. `预览图：`
66. `<div class="layui-upload-list" id="imgs">`
67. `</div>`
68. `</blockquote>`
69. `<div class="mark_button">`
70. `<button type="button" class="layui-btn layui-btn-normal" id="sele_imgs">选择文件</button>`
71. `<button type="button" class="layui-btn" id="upload_imgs" disabled>开始上传</button>`
72.  
73. `<button type="button" class="layui-btn layui-btn-danger" id="dele_imgs">删除选中图片</button>`
74. `</div>`
75.  
76. `</div>`
77.  
78. `<script type="text/javascript" src="common/layui/layui.all.js"></script>`
79.  
80. `<script id="img_template" type="text/html">`
81. `<div class="upload-img" filename="{ { d.index }}">`
82. `<input type="checkbox" name="" lay-skin="primary">`
83. `<img src="{ { d.result }}" alt="{ { d.name }}" class="layui-upload-img">`
84. `</div>`
85. `</script>`
86.  
87.  
88. `<script>`
89.  
90. `layui.use(['upload', 'laytpl', 'form'], function () {`
91. `var $ = layui.jquery`
92. `, upload = layui.upload`
93. `, laytpl = layui.laytpl`
94. `, form = layui.form;`
95.  
96. `//批量删除 单击事件`
97. `$('#dele_imgs').click(function () {`
98. `$('input:checked').each(function (index, value) {`
99. `var filename=$(this).parent().attr("filename");`
100. `delete imgFiles[filename];`
101. `$(this).parent().remove()`
102. `});`
103. `});`
104.  
105.  
106. `var imgFiles;`
107.  
108. `//多图片上传`
109. `var uploadInst = upload.render({`
110. `elem: '#sele_imgs' //开始`
111. `, acceptMime: 'image/*'`
112. `, url: '/upload/'`
113. `, auto: false`
114. `, bindAction: '#upload_imgs'`
115. `, multiple: true`
116. `, size: 1024 * 12`
117. `, choose: function (obj) { //选择图片后事件`
118. `var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列`
119. `imgFiles = files;`
120.  
121. `$('#upload_imgs').prop('disabled',false);`
122.  
123. `//预读本地文件示例，不支持ie8`
124. `obj.preview(function (index, file, result) {`
125. `var data = {`
126. `index: index,`
127. `name: file.name,`
128. `result: result`
129. `};`
130.  
131. `//将预览html 追加`
132. `laytpl(img_template.innerHTML).render(data, function (html) {`
133. `$('#imgs').append(html);`
134. `});`
135.  
136. `//绑定单击事件`
137. `$('#imgs div:last-child>img').click(function () {`
138. `var isChecked = $(this).siblings("input").prop("checked");`
139. `$(this).siblings("input").prop("checked", !isChecked);`
140. `return false;`
141. `});`
142.  
143. `});`
144. `}`
145. `, before: function (obj) { //上传前回函数`
146. `layer.load(); //上传loading`
147. `}`
148. `, done: function (res,index,upload) { //上传完毕后事件`
149.  
150. `layer.closeAll('loading'); //关闭loading`
151. `//上传完毕`
152.  
153. `$('#imgs').html("");//清空操作`
154.  
155. `top.layer.msg("上传成功！");`
156.  
157. `return delete imgFiles[index]; //删除文件队列已经上传成功的文件`
158.  
159. `}`
160. `, error: function (index, upload) {`
161.  
162. `layer.closeAll('loading'); //关闭loading`
163.  
164. `top.layer.msg("上传失败！");`
165.  
166. `}`
167. `});`
168.  
169. `});`
170. `</script>`
171.  
172. `</body>`
173.  
174. `</html>`

效果图

![raw_blob_name_TIM_E5_9B_BE_E7_89_8720180426163219.png][]

[raw_blob_name_TIM_E5_9B_BE_E7_89_8720180426163219.png]: https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13/raw?blob_name=TIM%E5%9B%BE%E7%89%8720180426163219.png