upload.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
  1. var upload_pic = [];
  2. var upload_file = [];
  3. var upload = [];
  4. var showUploadE;
  5. var showUploadUrl;
  6. var showUploadType = 1;
  7. var showUploadCall = false;
  8. var showUploadThis = false;
  9. var showUploadIndex = false;
  10. //创建监听函数
  11. var xhrOnProgress=function(fun) {
  12. xhrOnProgress.onprogress = fun; //绑定监听
  13. //使用闭包实现监听绑
  14. return function() {
  15. //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
  16. var xhr = $.ajaxSettings.xhr();
  17. //判断监听函数是否为函数
  18. if (typeof xhrOnProgress.onprogress !== 'function')
  19. return xhr;
  20. //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
  21. if (xhrOnProgress.onprogress && xhr.upload) {
  22. xhr.upload.onprogress = xhrOnProgress.onprogress;
  23. }
  24. return xhr;
  25. }
  26. }
  27. function showUpload(i,e,key,url,assets,type)
  28. {
  29. layui.use(['upload','layer','element'], function() {
  30. var html = '';
  31. var layer = layui.layer;
  32. var config = {
  33. type: 0,
  34. title: e.attr('value'),
  35. shade: 0.1,
  36. shadeClose : true,
  37. content: html,
  38. area: '800px'
  39. };
  40. e.click(function()
  41. {
  42. url = url.replace('save', 'view');
  43. showUploadE = e;
  44. if (!type) {
  45. type = 1;
  46. }
  47. showUploadType = type;
  48. showUploadUrl = url;
  49. var cur = $('#' + showUploadE.attr('v')).val();
  50. $.getJSON(url, {json:1,key:key,cur:cur}, function(t)
  51. {
  52. config.content = t.data;
  53. showUploadIndex = layer.open(config);
  54. })
  55. })
  56. });
  57. }
  58. function editorShowUpload(cur, url, title, func, self)
  59. {
  60. showUploadType = 2;
  61. showUploadCall = func;
  62. showUploadThis = self;
  63. layui.use(['upload','layer','element'], function() {
  64. var html = '';
  65. var layer = layui.layer;
  66. var config = {
  67. type: 0,
  68. title: title,
  69. shade: 0.1,
  70. shadeClose : true,
  71. content: html,
  72. area: '800px'
  73. };
  74. url = url.replace('save', 'view');
  75. showUploadUrl = url;
  76. $.getJSON(url, {json:1,cur:cur}, function(t)
  77. {
  78. config.content = t.data;
  79. showUploadIndex = layer.open(config);
  80. })
  81. });
  82. }
  83. function showUploadFilesSet(e, name, url, id)
  84. {
  85. $('.layui-anim-yes').addClass('layui-anim-no');
  86. $('.layui-anim-yes').removeClass('layui-anim-yes');
  87. e.parent().removeClass('layui-anim-no');
  88. e.parent().addClass('layui-anim-yes');
  89. $('.file_cur').val(url);
  90. if (showUploadType == 1) {
  91. var value = showUploadE.attr('v');
  92. loadUploadSet(showUploadE, value, {name:name,url:url});
  93. } else if (showUploadType == 2) {
  94. showUploadCall.call(showUploadThis, url, name, id);
  95. if (showUploadIndex) {
  96. layer.close(showUploadIndex);
  97. showUploadIndex = false;
  98. } else {
  99. layer.closeAll();
  100. }
  101. } else if (showUploadType == 3) {
  102. var value = showUploadE.attr('editor_id');
  103. var key = showUploadE.attr('key');
  104. //KindEditor.insertHtml('#' + value, '<div class="dever-video"><embed src="'+url+'" type="video/x-ms-asf-plugin" width="450" height="300" autostart="false" loop="true" data-id="'+id+'" data-key="'+key+'"/><div style="width:450px;height:20px;">'+name+':'+id+'(请勿修改)</div></div>');
  105. KindEditor.insertHtml('#' + value, '<img src="'+url+'" style="width:450px;height:300px;" data-id="'+id+'" data-key="'+key+'"/>');
  106. if (showUploadIndex) {
  107. layer.close(showUploadIndex);
  108. showUploadIndex = false;
  109. } else {
  110. layer.closeAll();
  111. }
  112. }
  113. }
  114. function showUploadFilesSearch(e)
  115. {
  116. var p = e.parent();
  117. var pg = p.find('.file_pg').val();
  118. var key = p.find('.file_key').val();
  119. var name = p.find('.file_filename').val();
  120. var tag = p.find('.file_tag').val();
  121. var cate = p.find('.file_cate').val();
  122. var cur = p.find('.file_cur').val();
  123. var url = showUploadUrl;
  124. showUploadFiles(url, name, key, cate, tag, cur, pg);
  125. }
  126. function showUploadFiles(url, name, key, cate, tag, cur, pg)
  127. {
  128. if (!pg) {
  129. pg = 1;
  130. }
  131. $.getJSON(url, {json:1,key:key, name:name,cate:cate, tag:tag, pg:pg, cur:cur}, function(t)
  132. {
  133. var t = '<div>' + t.data + '</div>';
  134. html = $(t).find('#component-anim').html();
  135. $("#component-anim").html(html);
  136. })
  137. }
  138. function loadUploadL(i,e,key,url,assets)
  139. {
  140. var value = e.attr('v');
  141. if (typeof(upload[value]) != "undefined") {
  142. //return;
  143. }
  144. upload[value] = true;
  145. upload_pic[value] = [];
  146. upload_file[value] = [];
  147. var id = e.attr('id');
  148. var token = e.attr('token');
  149. var host = e.attr('host');
  150. var domain = e.attr('domain');
  151. var path = e.attr('path');
  152. var cover = e.attr('cover');
  153. if (!cover) {
  154. cover = 1;
  155. }
  156. var uploadUrl = url;
  157. url = domain;
  158. var config = {
  159. useCdnDomain: true,
  160. disableStatisticsReport: false,
  161. retryCount: 6
  162. };
  163. var putExtra = {
  164. fname: "",
  165. params: {},
  166. mimeType: null
  167. };
  168. layui.use(['layer','element'], function() {
  169. var layer = layui.layer;
  170. var element = layui.element;
  171. $("#" + id).unbind("change").bind("change",function() {
  172. var file = this.files[0];
  173. // eslint-disable-next-line
  174. var finishedAttr = [];
  175. // eslint-disable-next-line
  176. var compareChunks = [];
  177. var observable;
  178. if (file) {
  179. element.progress(id + '_progress', '0%')
  180. layer.load();
  181. var filename = file.name;
  182. var temp = filename.split('.');
  183. putExtra.params["x:name"] = temp[0];
  184. filename = path + hex_md5(file.name) + '.' + temp[temp.length-1];
  185. //不覆盖
  186. if (cover == 2) {
  187. var timestamp = Date.parse(new Date());
  188. filename = path + hex_md5(file.name + '_' + timestamp) + '.' + temp[temp.length-1];
  189. }
  190. // 设置next,error,complete对应的操作,分别处理相应的进度信息,错误信息,以及完成后的操作
  191. var error = function(err) {
  192. //请求异常回调
  193. console.log(err);
  194. layer.alert('文件上传错误1');
  195. element.progress(id + '_progress', '0%')
  196. $('#' + id + '_progress').hide();
  197. layer.closeAll('loading');
  198. };
  199. var complete = function(res) {
  200. //&& res.key.match(/\.(jpg|jpeg|png|gif)$/)
  201. if (res.key) {
  202. element.progress(id + '_progress', '0%')
  203. $('#' + id + '_progress').hide();
  204. layer.closeAll('loading');
  205. var data = {};
  206. if (res.hash) {
  207. $.getJSON(uploadUrl.replace('save.start', 'qiniu.addFile'), {source:file.name,file:res.key, key:key});
  208. data.status = 1;
  209. data.name = res.key;
  210. data.url = host + res.key;
  211. loadUploadSet(e,value,data);
  212. } else {
  213. layer.alert('文件上传错误2');
  214. return false;
  215. }
  216. }
  217. };
  218. var next = function(response) {
  219. var chunks = response.chunks||[];
  220. var total = response.total;
  221. // 这里对每个chunk更新进度,并记录已经更新好的避免重复更新,同时对未开始更新的跳过
  222. for (var i = 0; i < chunks.length; i++) {
  223. if (chunks[i].percent === 0 || finishedAttr[i]){
  224. continue;
  225. }
  226. if (compareChunks[i].percent === chunks[i].percent){
  227. continue;
  228. }
  229. if (chunks[i].percent === 100){
  230. finishedAttr[i] = true;
  231. }
  232. }
  233. $('#' + id + '_progress').show();
  234. element.progress(id + '_progress', parseInt(total.percent)+'%')
  235. compareChunks = chunks;
  236. };
  237. var subObject = {
  238. next: next,
  239. error: error,
  240. complete: complete
  241. };
  242. var subscription;
  243. // 调用sdk上传接口获得相应的observable,控制上传和暂停
  244. observable = qiniu.upload(file, filename, token, putExtra, config);
  245. subscription = observable.subscribe(subObject);
  246. }
  247. })
  248. });
  249. }
  250. function loadUpload(i,e,key,url,assets)
  251. {
  252. var value = e.attr('v');
  253. if (typeof(upload[value]) != "undefined") {
  254. //return;
  255. }
  256. upload[value] = true;
  257. upload_pic[value] = [];
  258. upload_file[value] = [];
  259. var data = {};
  260. data.key = key;
  261. var token = e.attr('token');
  262. var host = e.attr('host');
  263. var domain = e.attr('domain');
  264. var path = e.attr('path');
  265. var cover = e.attr('cover');
  266. if (!cover) {
  267. cover = 1;
  268. }
  269. if (token) {
  270. data.token = token;
  271. }
  272. var uploadUrl = url;
  273. if (domain) {
  274. url = domain;
  275. delete data.key;
  276. //data.key = 2;
  277. }
  278. var id = e.attr('id');
  279. layui.use(['upload','layer','element'], function() {
  280. var layer = layui.layer;
  281. var layuiUpload = layui.upload;
  282. var element = layui.element;
  283. var uploadInst = layuiUpload.render({
  284. elem: '#' + id
  285. ,data: data
  286. ,field: 'file'
  287. ,url: url
  288. ,multiple: true
  289. ,accept:'file'
  290. //,auto:false
  291. ,xhr:xhrOnProgress
  292. ,progress:function(value){//上传进度回调 value进度值
  293. $('#' + id + '_progress').show();
  294. element.progress(id + '_progress', value+'%')//设置页面进度条
  295. }
  296. ,choose: function(obj, self){
  297. if (domain) {
  298. obj.editFile(path, cover);
  299. }
  300. element.progress(id + '_progress', '0%')
  301. //layer.load();
  302. }
  303. ,done: function(data, file) {
  304. if (data.hash) {
  305. data.status = 1;
  306. data.name = data.key;
  307. data.url = host + data.key;
  308. $.getJSON(uploadUrl.replace('save.start', 'qiniu.addFile'), {source:file.name,file:data.key, key:key});
  309. }
  310. element.progress(id + '_progress', '0%')
  311. $('#' + id + '_progress').hide();
  312. layer.closeAll('loading');
  313. if (data.status == 1) {
  314. loadUploadSet(e,value,data);
  315. } else {
  316. element.progress(id + '_progress', '0%')
  317. layer.alert(data.message);
  318. return false;
  319. }
  320. }
  321. ,error: function(){
  322. //请求异常回调
  323. layer.alert('文件上传错误');
  324. element.progress(id + '_progress', '0%')
  325. $('#' + id + '_progress').hide();
  326. layer.closeAll('loading');
  327. }
  328. });
  329. });
  330. }
  331. function loadUploadSet(e,value,data)
  332. {
  333. var mul = e.attr('mul');
  334. if (mul == 'yes') {
  335. if (e.attr('t') == 'file') {
  336. if (upload_file[value].length <= 0 && $("#" + value).val()) {
  337. upload_file[value] = $("#" + value).val().split(',');
  338. }
  339. var m = $('.' +value+'_mul');
  340. var i = m.find('li').eq(upload_file[value].length);
  341. if (i.length) {
  342. i.find('a').eq(0).html(data.name);
  343. } else {
  344. m.append('<li><a href="'+data.url+'" target="_blank" title="点此下载" >'+data.name+'</a>&nbsp;&nbsp;<a href="javascript:;" title="点此删除" style="color:red;" onclick="fileDel($(this), \''+value+'\')">[删除]</a></li>');
  345. }
  346. upload_file[value].push(data.url);
  347. $("#" + value).val(upload_file.join(','));
  348. } else {
  349. if (upload_pic[value].length <= 0 && $("#" + value).val()) {
  350. upload_pic[value] = $("#" + value).val().split(',');
  351. }
  352. var m = $('.' +value+'_mul');
  353. var i = m.find('img').eq(upload_pic[value].length);
  354. if (i.length) {
  355. i.attr('src', data.url);
  356. } else {
  357. m.append('<a href="javascript:;" title="点此删除" onclick="picDel($(this), \''+value+'\')"><img src="'+data.url+'" width="150" style="margin-left:5px;" alt="点此删除"/></a>');
  358. }
  359. upload_pic[value].push(data.url);
  360. $("#" + value).val(upload_pic[value].join(','));
  361. }
  362. } else {
  363. if (e.attr('t') == 'file') {
  364. } else {
  365. $('#show_'+value).attr('src',data.url).show();
  366. $('#show_'+value).unbind('click').bind('click', function()
  367. {
  368. picDel($(this), value, 1);
  369. })
  370. }
  371. $('#'+value).val(data.url);
  372. }
  373. }
  374. function picDel(e,v,s)
  375. {
  376. if (confirm('确定要删除图片吗?')) {
  377. if (s == 1) {
  378. e.hide();
  379. $("#" + v).val('');
  380. } else {
  381. if (upload_pic[v].length <= 0 && $("#" + v).val()) {
  382. upload_pic[v] = $("#" + v).val().split(',');
  383. }
  384. var p = e.find('img').attr('src');
  385. e.remove();
  386. upload_pic[v].remove(p);
  387. $("#" + v).val(upload_pic[v].join(','));
  388. }
  389. }
  390. }
  391. function fileDel(e,v)
  392. {
  393. if(confirm('确定要删除文件吗?'))
  394. {
  395. if(upload_file[v].length <= 0 && $("#" + v).val())
  396. {
  397. upload_file[v] = $("#" + v).val().split(',');
  398. }
  399. var parent = e.parent();
  400. var p = parent.find('a').eq(0).attr('href');
  401. parent.remove();
  402. upload_file[v].remove(p);
  403. //console.info(pic);
  404. $("#" + v).val(upload_file[v].join(','));
  405. }
  406. }