uploadplus.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. layui.define(['layer'],function(exports){
  2. //提示:模块也可以依赖其它模块,如:layui.define('layer', callback);
  3. let layer = layui.layer,element = layui.element, form = layui.form, upload = layui.upload,uploadindex=0;
  4. let isObject = function(obj) {
  5. return Object.prototype.toString.call(obj) === '[object Object]';
  6. }
  7. const opts={
  8. "title":'上传图片',
  9. "url":'/admin/api/upload/thumb/500',
  10. "target":'gogoupload',
  11. "type":1,
  12. "max":31,
  13. "callback": null
  14. };
  15. var uploadplus = function(options){
  16. this.settings = $.extend({}, opts, options);
  17. this.settings.index = uploadindex;
  18. uploadindex++;
  19. this.createStyle();
  20. var me=this;
  21. if(isObject(me.settings.target)){
  22. me.init();
  23. }
  24. else{
  25. $('#'+me.settings.target).click(function(){
  26. me.init();
  27. });
  28. }
  29. };
  30. uploadplus.prototype = {
  31. init: function () {
  32. var me = this;
  33. var area =[[],['640px','360px'],['928px','610px']];
  34. this.layerindex = layer.open({
  35. 'title':me.settings.title,
  36. 'area':area[me.settings.type],
  37. 'content':me.render(),
  38. 'type':1,
  39. 'success':function(){
  40. if(me.settings.type==1){
  41. me.uploadOne();
  42. }else{
  43. me.uploadMore();
  44. }
  45. }
  46. });
  47. },
  48. render: function (){
  49. var me = this;
  50. var template_one = '<div class="layui-form p-3">\
  51. <div class="layui-form-item">\
  52. <label class="layui-form-label">来源:</label>\
  53. <div class="layui-input-block">\
  54. <input type="radio" name="uploadtype" lay-filter="type" value="1" title="本地上传" checked>\
  55. <input type="radio" name="uploadtype" lay-filter="type" value="2" title="网络图片">\
  56. </div>\
  57. </div>\
  58. <div id="uploadType1">\
  59. <div class="layui-form-item">\
  60. <label class="layui-form-label">文件:</label>\
  61. <div class="layui-input-block">\
  62. <span class="gougu-upload-files">.jpg、.jpeg、.gif、.png、.bmp</span><button type="button" class="layui-btn layui-btn-normal" id="gouguUploadBtn'+me.settings.index+'">选择文件</button>\
  63. </div>\
  64. </div>\
  65. <div class="layui-form-item">\
  66. <label class="layui-form-label"></label>\
  67. <div class="layui-input-block">\
  68. <span class="gougu-upload-tips">只能上传 .jpg、.jpeg、.gif、.png、.bmp 文件</span>\
  69. </div>\
  70. </div>\
  71. <div class="layui-form-item">\
  72. <label class="layui-form-label"></label>\
  73. <div class="layui-input-block" id="gouguUploadChoosed'+me.settings.index+'"></div>\
  74. </div>\
  75. <div class="layui-progress upload-progress" lay-showpercent="yes" lay-filter="upload-progress-'+me.settings.index+'" style="margin-bottom:12px; margin-left:100px; width:320px; display:none;">\
  76. <div class="layui-progress-bar layui-bg-blue" lay-percent=""><span class="layui-progress-text"></span></div>\
  77. </div>\
  78. <div class="layui-form-item layui-form-item-sm">\
  79. <label class="layui-form-label"></label>\
  80. <div class="layui-input-block">\
  81. <button type="button" class="layui-btn" id="uploadNow'+me.settings.index+'">开始上传</button>\
  82. </div>\
  83. </div>\
  84. </div>\
  85. <div id="uploadType2" style="display:none; width:480px;">\
  86. <div class="layui-form-item">\
  87. <label class="layui-form-label">URL地址:</label>\
  88. <div class="layui-input-block">\
  89. <input type="text" name="img_url" placeholder="" autocomplete="off" class="layui-input">\
  90. </div>\
  91. </div>\
  92. <div class="layui-form-item">\
  93. <label class="layui-form-label">图片名称:</label>\
  94. <div class="layui-input-block">\
  95. <input type="text" name="img_name" placeholder="" autocomplete="off" class="layui-input">\
  96. </div>\
  97. </div>\
  98. <div class="layui-form-item layui-form-item-sm">\
  99. <label class="layui-form-label"></label>\
  100. <div class="layui-input-block">\
  101. <span class="layui-btn" id="uploadAjax'+me.settings.index+'">确定保存</span>\
  102. </div>\
  103. </div>\
  104. </div>\
  105. </div>';
  106. var template_more = '<div class="layui-form p-3">\
  107. <div id="gouguUploadBox'+me.settings.index+'" class="gougu-upload-box select">\
  108. <div id="gouguUploadBtn'+me.settings.index+'" class="gougu-upload-btn"><div class="gougu-upload-btn-box"><i class="layui-icon layui-icon-addition"></i><br/>点击上传图片</div></div>\
  109. </div>\
  110. <div class="layui-progress upload-progress" lay-showpercent="yes" lay-filter="progress-'+me.settings.index+'" style="margin:12px 0; width:900px;">\
  111. <div class="layui-progress-bar layui-bg-blue" lay-percent=""><span class="layui-progress-text"></span></div>\
  112. </div>\
  113. <div class="layui-form-item layui-form-item-sm">\
  114. <span class="gougu-upload-tips">注:只能上传 jpg、.jpeg、.gif、.png、.bmp 文件,单次最多上传 '+me.settings.max+' 张图片,单张图片最大不要超过10M。</span>\
  115. <button type="button" class="layui-btn" id="uploadNow'+me.settings.index+'">开始上传</button>\
  116. <button type="button" class="layui-btn layui-btn-primary" id="uploadClear'+me.settings.index+'">清空列表</button>\
  117. <button type="button" class="layui-btn layui-btn-normal" id="uploadOk'+me.settings.index+'">提交</button>\
  118. </div>\
  119. </div>';
  120. return me.settings.type==1?template_one:template_more;
  121. },
  122. uploadOne:function(){
  123. var me = this;
  124. form.render();
  125. form.on('radio(type)', function(data){
  126. if(data.value==1){
  127. $('#uploadType1').show();
  128. $('#uploadType2').hide();
  129. }
  130. else{
  131. $('#uploadType1').hide();
  132. $('#uploadType2').show();
  133. }
  134. });
  135. //选文件
  136. var uploadOne = upload.render({
  137. elem: '#gouguUploadBtn'+me.settings.index
  138. ,url: me.settings.url
  139. ,auto: false
  140. ,accept: 'file' //普通文件
  141. ,exts: 'png|jpg|gif|jpeg|bmp' //只允许上传文件格式
  142. ,bindAction: '#uploadNow'+me.settings.index
  143. ,choose: function(obj){
  144. obj.preview(function(index, file, result){
  145. $('#gouguUploadChoosed'+me.settings.index).html('已选择:'+file.name);
  146. });
  147. }
  148. ,before: function(obj){
  149. $('.upload-progress').show();
  150. element.progress('upload-progress-'+me.settings.index, '0%');
  151. }
  152. ,progress: function(n, elem, e){
  153. console.log(n);
  154. element.progress('upload-progress-'+me.settings.index, n + '%');
  155. }
  156. ,done: function(res){
  157. layer.msg(res.msg);
  158. if(res.code==0){
  159. me.settings.callback(res.data);
  160. layer.close(me.layerindex);
  161. }
  162. }
  163. });
  164. $('#uploadAjax'+me.settings.index).on('click',function(){
  165. let url=$('[name="img_url"]').val();
  166. let name=$('[name="img_name"]').val();
  167. if(url == ''){
  168. layer.msg('请输入图片URL');
  169. return false;
  170. }
  171. if(name == ''){
  172. layer.msg('请输入图片名称');
  173. return false;
  174. }
  175. let res={
  176. filepath:url,
  177. name:name,
  178. id:0
  179. }
  180. me.settings.callback(res);
  181. layer.close(me.layerindex);
  182. })
  183. },
  184. uploadMore:function(){
  185. var me = this,file_lists=[];
  186. console.log(file_lists);
  187. var uploadList = upload.render({
  188. elem: '#gouguUploadBtn'+me.settings.index
  189. ,elemList: $('#gouguUploadBox'+me.settings.index) //列表元素对象
  190. ,url: me.settings.url
  191. ,accept: 'file'
  192. ,exts: 'png|jpg|gif|jpeg|bmp' //只允许上传文件格式
  193. ,multiple: true
  194. ,number: me.settings.max
  195. ,auto: false
  196. ,bindAction: '#uploadNow'+me.settings.index
  197. ,choose: function(obj){
  198. var that = this;
  199. var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
  200. that.elemList.removeClass('select').addClass('selected');
  201. //读取本地文件
  202. obj.preview(function(index, file, result){
  203. var card = $('<div class="gougu-upload-card" id="gouguUploadCard'+index+'">\
  204. <div class="gougu-upload-card-box">\
  205. <img alt="'+ file.name +'" class="gougu-upload-card-img" src="'+ result +'">\
  206. <div class="gougu-upload-card-bar"><div class="layui-progress" lay-filter="progress-card-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></div>\
  207. <div class="gougu-upload-card-text">'+ file.name +'</div>\
  208. <div class="gougu-upload-card-reload"><button type="button" class="layui-btn layui-btn-xs">重新上传</button></div>\
  209. <div class="gougu-upload-card-del" data-index="'+index+'"><button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger"><i class="layui-icon layui-icon-close"></i></button></div>\
  210. </div>\
  211. </div>');
  212. //单个重传
  213. card.find('.gougu-upload-card-reload').on('click', function(){
  214. obj.upload(index, file);
  215. });
  216. //删除
  217. card.find('.gougu-upload-card-del').on('click', function(){
  218. delete files[index]; //删除对应的文件
  219. card.remove();
  220. uploadList.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
  221. });
  222. that.elemList.append(card);
  223. element.render('progress'); //渲染新加的进度条组件
  224. });
  225. }
  226. ,done: function(res, index, upload){ //成功的回调
  227. var that = this;
  228. if(res.code==0){
  229. delete this.files[index]; //删除文件队列已经上传成功的文件
  230. that.elemList.find('#gouguUploadCard'+ index).addClass('uploadok');
  231. file_lists.push(res.data);
  232. }
  233. else{
  234. layer.msg(res.msg);
  235. this.error(index, upload);
  236. }
  237. }
  238. ,allDone: function(obj){ //多文件上传完毕后的状态回调
  239. //console.log(obj);
  240. layer.msg('上传成功');
  241. me.settings.callback(file_lists,obj);
  242. layer.close(me.layerindex);
  243. }
  244. ,error: function(index, upload){ //错误回调
  245. var that = this;
  246. var tr = that.elemList.find('#gouguUploadCard'+ index).addClass('reload'); //显示重传
  247. }
  248. ,progress: function(n, elem, e, index){
  249. element.progress('progress-card-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
  250. }
  251. });
  252. $('#uploadClear'+me.settings.index).click(function(){
  253. $('#gouguUploadBox'+me.settings.index).find('.gougu-upload-card-del').click();
  254. })
  255. $('#uploadOk'+me.settings.index).click(function(){
  256. if(me.settings.files.length>0){
  257. me.settings.callback(me.settings.files);
  258. layer.close(me.layerindex);
  259. }
  260. else{
  261. layer.msg('请先点击开始上传按钮上传');
  262. }
  263. })
  264. },
  265. createStyle:function(){
  266. var cssText='.gougu-upload-files{background-color: #ffffff; border:1px solid #e4e7ed;color: #c0c4cc;cursor: not-allowed; padding:0 12px; box-sizing: border-box; display: inline-block; font-size: inherit; height: 38px; line-height: 35px; margin-right:8px; border-radius:2px;}\
  267. .gougu-upload-box{background-color:#f8f8f8; border:1px solid #eee; border-radius:6px; width:888px; height:440px; padding:5px; overflow-y:auto; margin:0 auto; position:relative;-webkit-user-select:none;-moz-user-select:none-ms-user-select:none;}\
  268. .select .gougu-upload-btn{width:100%; height:100%; position:absolute;top:0;left:0; line-height:440px;}\
  269. .select .gougu-upload-btn-box{width:100%; height:100%; box-sizing: border-box; padding-top:160px; line-height:1.2;text-align:center; cursor:pointer; color:#49bc85;font-size:22px;}\
  270. .select .gougu-upload-btn-box i{font-size:60px;}\
  271. .selected .gougu-upload-btn{width:100px; height:100px; float:left; padding:5px;}\
  272. .selected .gougu-upload-btn-box{width:100px; height:100px; box-sizing: border-box; background-color:#eaf7f0; border:1px solid #49bc85; padding-top:16px; line-height:1.2;font-size:14px; text-align:center; cursor:pointer; color:#49bc85}\
  273. .selected .gougu-upload-btn-box i{font-size:36px;}\
  274. .gougu-upload-card{width:100px; height:100px; float:left; padding:5px;}\
  275. .gougu-upload-card-box{width:100px; height:100px; box-sizing: border-box; background-color:#fff; border:1px solid #eee;position: relative;overflow: hidden;}\
  276. .gougu-upload-card-box img {width: 100px; height: 100px; object-fit: cover;}\
  277. .gougu-upload-card-text{background-color:rgba(0,0,0,.618); color:#fff; position:absolute;left:0; bottom:0; line-height:1.6; font-size:12px; width:100px; text-overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}\
  278. .gougu-upload-card-reload{width:50px; height:32px; position:absolute; top:5px; left:3px; font-size:12px;display:none;}\
  279. .gougu-upload-card-del{width:32px; height:32px; position:absolute; top:5px; right:0; display:none;}\
  280. .gougu-upload-card:hover .gougu-upload-card-del{display:block;}\
  281. .uploadok.gougu-upload-card .gougu-upload-card-del{display:none;}\
  282. .reload.gougu-upload-card .gougu-upload-card-reload{display:block;}\
  283. .gougu-upload-card-bar{width:100%; position:absolute;left:0; bottom:16px;}\
  284. .gougu-upload-tips{color:#969696; font-size:12px; margin-right:20px;}';
  285. var document = window.document;
  286. var styleTag = document.createElement("style");
  287. styleTag.setAttribute("type", "text/css");
  288. if (styleTag.styleSheet) { //ie
  289. styleTag.styleSheet.cssText += cssText;
  290. }
  291. else{
  292. styleTag.innerHTML = cssText;
  293. }
  294. document.getElementsByTagName("head").item(0).appendChild(styleTag);
  295. }
  296. }
  297. //输出接口
  298. exports('uploadplus', uploadplus);
  299. });