upload.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659
  1. var upload_pic = [];
  2. var upload_pic_info = [];
  3. var upload_file = [];
  4. var upload = [];
  5. var showUploadE = false;
  6. var showUploadFilesUploadE = false;
  7. var showUploadFilesSearchE = false;
  8. var showUploadFilesSearchState = 1;
  9. var upload_search_default = '';
  10. var showUploadUrl;
  11. var showUploadType = 1;
  12. var showUploadCall = false;
  13. var showUploadThis = false;
  14. var showUploadIndex = false;
  15. var picManageE = false;
  16. var picManageI = false;
  17. var picManageV = false;
  18. var picManageLayer = false;
  19. var showUploadFilesValue = [];
  20. //创建监听函数
  21. var xhrOnProgress=function(fun) {
  22. xhrOnProgress.onprogress = fun; //绑定监听
  23. //使用闭包实现监听绑
  24. return function() {
  25. //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
  26. var xhr = $.ajaxSettings.xhr();
  27. //判断监听函数是否为函数
  28. if (typeof xhrOnProgress.onprogress !== 'function')
  29. return xhr;
  30. //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
  31. if (xhrOnProgress.onprogress && xhr.upload) {
  32. xhr.upload.onprogress = xhrOnProgress.onprogress;
  33. }
  34. return xhr;
  35. }
  36. }
  37. function showUpload(i,e,key,url,assets,type)
  38. {
  39. layui.use(['upload','layer','element'], function() {
  40. var html = '';
  41. var layer = layui.layer;
  42. var layerConfig = {
  43. type: 1,
  44. title: e.attr('value'),
  45. shade: 0.1,
  46. shadeClose : true,
  47. content: html,
  48. area: ['800px', '600px']
  49. };
  50. e.unbind('click').bind('click', function()
  51. {
  52. url = url.replace('save', 'view');
  53. showUploadE = e;
  54. if (!type) {
  55. type = 1;
  56. }
  57. showUploadType = type;
  58. showUploadUrl = url;
  59. var cur = $('#' + showUploadE.attr('v')).val();
  60. var value = '';
  61. if (e.attr('data-value')) {
  62. value = e.attr('data-value');
  63. }
  64. var upload_search = '';
  65. if (e.attr('upload_search')) {
  66. upload_search = e.attr('upload_search');
  67. }
  68. $.getJSON(url, {json:1,key:key,cur:cur,value:value,upload_search:upload_search}, function(t)
  69. {
  70. if (showUploadIndex) {
  71. layer.close(showUploadIndex);
  72. }
  73. //layer.closeAll();
  74. layerConfig.content = t.data;
  75. layerConfig.end = function() {
  76. if (showUploadFilesUploadE) {
  77. showUploadFilesUploadE = false;
  78. }
  79. }
  80. showUploadIndex = layer.open(layerConfig);
  81. })
  82. })
  83. });
  84. }
  85. function editorShowUpload(cur, url, title, func, self)
  86. {
  87. showUploadType = 2;
  88. showUploadCall = func;
  89. showUploadThis = self;
  90. layui.use(['upload','layer','element'], function() {
  91. var html = '';
  92. var layer = layui.layer;
  93. var layerConfig = {
  94. type: 1,
  95. title: title,
  96. shade: 0.1,
  97. shadeClose : true,
  98. content: html,
  99. area: '800px'
  100. };
  101. url = url.replace('save', 'view');
  102. showUploadUrl = url;
  103. $.getJSON(url, {json:1,cur:cur}, function(t)
  104. {
  105. layerConfig.content = t.data;
  106. showUploadIndex = layer.open(layerConfig);
  107. })
  108. });
  109. }
  110. //删除
  111. function showUploadFilesSetState(e, url)
  112. {
  113. if (confirm('确定进行此项操作吗?')) {
  114. $.getJSON(url, {json:1}, function(t)
  115. {
  116. if (!showUploadFilesSearchE) {
  117. showUploadFilesSearchE = $('#showUploadFilesSearch');
  118. }
  119. showUploadFilesSearch(showUploadFilesSearchE, showUploadFilesSearchState);
  120. })
  121. }
  122. }
  123. function showUploadFilesShowValue(e)
  124. {
  125. var html = e.html();
  126. layer.alert(html);
  127. }
  128. function showUploadFilesSetValue(e, url, id, value)
  129. {
  130. if (showUploadFilesValue[id]) {
  131. value = showUploadFilesValue[id];
  132. }
  133. layer.prompt({
  134. formType: 2,
  135. value: value,
  136. title: '请输入附加值,例子:key1=value1&key2=value2',
  137. area: ['300px', '150px'] //自定义文本域宽高
  138. }, function(value, index, elem){
  139. showUploadFilesValue[id] = value;
  140. $.getJSON(url, {value:value}, function(t){});
  141. layer.close(index);
  142. });
  143. }
  144. function showUploadFilesSet(e, name, url, id)
  145. {
  146. $('.layui-anim-yes').addClass('layui-anim-no');
  147. $('.layui-anim-yes').removeClass('layui-anim-yes');
  148. e.parent().removeClass('layui-anim-no');
  149. e.parent().addClass('layui-anim-yes');
  150. $('.file_cur').val(url);
  151. if (showUploadType == 1) {
  152. var value = showUploadE.attr('v');
  153. var key = showUploadE.attr('key');
  154. loadUploadSet(showUploadE, value, {name:name,url:url}, key);
  155. } else if (showUploadType == 2) {
  156. showUploadCall.call(showUploadThis, url, name, id);
  157. } else if (showUploadType == 3) {
  158. var value = showUploadE.attr('editor_id');
  159. var key = showUploadE.attr('key');
  160. //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>');
  161. KindEditor.insertHtml('#' + value, '<img src="'+url+'" style="width:450px;height:300px;" data-id="'+id+'" data-key="'+key+'"/>');
  162. }
  163. if (showUploadIndex) {
  164. layer.close(showUploadIndex);
  165. showUploadIndex = false;
  166. } else {
  167. layer.closeAll();
  168. }
  169. }
  170. function showUploadFilesUpload(e)
  171. {
  172. showUploadFilesUploadE = e;
  173. showUploadE.parent().find('.image_upload').click();
  174. }
  175. function showUploadFilesSearch(e, state, all)
  176. {
  177. showUploadFilesSearchE = e;
  178. showUploadFilesSearchState = state;
  179. var p = e.parent();
  180. var pg = p.find('.file_pg').val();
  181. var key = p.find('.file_key').val();
  182. var name = p.find('.file_filename').val();
  183. var tag = p.find('.file_tag').val();
  184. var cate = p.find('.file_cate').val();
  185. var cur = p.find('.file_cur').val();
  186. var upload_search = p.find('.upload_search').val();
  187. var state = state;
  188. var url = showUploadUrl;
  189. if (upload_search) {
  190. upload_search_default = upload_search;
  191. }
  192. upload_search = upload_search_default;
  193. if (all) {
  194. upload_search = '';
  195. }
  196. showUploadFiles(url, name, key, cate, tag, cur, pg, upload_search, state);
  197. }
  198. function showUploadFiles(url, name, key, cate, tag, cur, pg, upload_search, state)
  199. {
  200. if (!pg) {
  201. pg = 1;
  202. }
  203. $.getJSON(url, {json:1,key:key, name:name,cate:cate, tag:tag, pg:pg, cur:cur, upload_search:upload_search,state:state}, function(t)
  204. {
  205. var t = '<div>' + t.data + '</div>';
  206. html = $(t).find('#component-anim').html();
  207. $("#component-anim").html(html);
  208. })
  209. }
  210. function loadUploadL(i,e,key,url,assets)
  211. {
  212. var value = e.attr('v');
  213. if (typeof(upload[value]) != "undefined") {
  214. //return;
  215. }
  216. upload[value] = true;
  217. upload_pic[value] = [];
  218. upload_pic_info[value] = [];
  219. upload_file[value] = [];
  220. var id = e.attr('id');
  221. var token = e.attr('token');
  222. var host = e.attr('host');
  223. var domain = e.attr('domain');
  224. var path = e.attr('path');
  225. var cover = e.attr('cover');
  226. var search = '';
  227. if (e.attr('upload_search_value')) {
  228. search = e.attr('upload_search_value');
  229. }
  230. if (!cover) {
  231. cover = 1;
  232. }
  233. var uploadUrl = url;
  234. url = domain;
  235. var layerConfig = {
  236. useCdnDomain: true,
  237. disableStatisticsReport: false,
  238. retryCount: 6
  239. };
  240. var putExtra = {
  241. fname: "",
  242. params: {},
  243. mimeType: null
  244. };
  245. layui.use(['layer','element'], function() {
  246. var layer = layui.layer;
  247. var element = layui.element;
  248. $("#" + id).unbind("change").bind("change",function() {
  249. var file = this.files[0];
  250. // eslint-disable-next-line
  251. var finishedAttr = [];
  252. // eslint-disable-next-line
  253. var compareChunks = [];
  254. var observable;
  255. if (file) {
  256. element.progress(id + '_progress', '0%')
  257. layer.load();
  258. var filename = file.name;
  259. var temp = filename.split('.');
  260. putExtra.params["x:name"] = temp[0];
  261. filename = path + hex_md5(file.name) + '.' + temp[temp.length-1];
  262. //不覆盖
  263. if (cover == 2) {
  264. var timestamp = Date.parse(new Date());
  265. filename = path + hex_md5(file.name + '_' + timestamp) + '.' + temp[temp.length-1];
  266. }
  267. // 设置next,error,complete对应的操作,分别处理相应的进度信息,错误信息,以及完成后的操作
  268. var error = function(err) {
  269. //请求异常回调
  270. layer.alert('文件上传错误1');
  271. element.progress(id + '_progress', '0%')
  272. $('#' + id + '_progress').hide();
  273. layer.closeAll('loading');
  274. };
  275. var complete = function(res) {
  276. //&& res.key.match(/\.(jpg|jpeg|png|gif)$/)
  277. if (res.key) {
  278. element.progress(id + '_progress', '0%')
  279. $('#' + id + '_progress').hide();
  280. layer.closeAll('loading');
  281. var data = {};
  282. if (res.hash) {
  283. $.getJSON(uploadUrl.replace('save.start', 'qiniu.addFile'), {source:file.name,file:res.key, key:key, search:search});
  284. data.status = 1;
  285. data.name = res.key;
  286. data.url = host + res.key;
  287. loadUploadSet(e,value,data,key);
  288. } else {
  289. layer.alert('文件上传错误2');
  290. return false;
  291. }
  292. }
  293. };
  294. var next = function(response) {
  295. var chunks = response.chunks||[];
  296. var total = response.total;
  297. // 这里对每个chunk更新进度,并记录已经更新好的避免重复更新,同时对未开始更新的跳过
  298. for (var i = 0; i < chunks.length; i++) {
  299. if (chunks[i].percent === 0 || finishedAttr[i]){
  300. continue;
  301. }
  302. if (compareChunks[i].percent === chunks[i].percent){
  303. continue;
  304. }
  305. if (chunks[i].percent === 100){
  306. finishedAttr[i] = true;
  307. }
  308. }
  309. $('#' + id + '_progress').show();
  310. element.progress(id + '_progress', parseInt(total.percent)+'%')
  311. compareChunks = chunks;
  312. };
  313. var subObject = {
  314. next: next,
  315. error: error,
  316. complete: complete
  317. };
  318. var subscription;
  319. // 调用sdk上传接口获得相应的observable,控制上传和暂停
  320. observable = qiniu.upload(file, filename, token, putExtra, layerConfig);
  321. subscription = observable.subscribe(subObject);
  322. }
  323. })
  324. });
  325. }
  326. function loadUpload(i,e,key,url,assets)
  327. {
  328. var value = e.attr('v');
  329. if (typeof(upload[value]) != "undefined") {
  330. //return;
  331. }
  332. upload[value] = true;
  333. upload_pic[value] = [];
  334. upload_pic_info[value] = [];
  335. upload_file[value] = [];
  336. var data = {};
  337. data.key = key;
  338. var token = e.attr('token');
  339. var host = e.attr('host');
  340. var domain = e.attr('domain');
  341. var path = e.attr('path');
  342. var cover = e.attr('cover');
  343. data.search = '';
  344. if (e.attr('upload_search_value')) {
  345. data.search = e.attr('upload_search_value');
  346. }
  347. if (!cover) {
  348. cover = 1;
  349. }
  350. if (token) {
  351. data.token = token;
  352. }
  353. var uploadUrl = url;
  354. if (domain) {
  355. url = domain;
  356. delete data.key;
  357. //data.key = 2;
  358. }
  359. var id = e.attr('id');
  360. layui.use(['upload','layer','element'], function() {
  361. var layer = layui.layer;
  362. var layuiUpload = layui.upload;
  363. var element = layui.element;
  364. var uploadInst = layuiUpload.render({
  365. elem: '#' + id
  366. ,data: data
  367. ,field: 'file'
  368. ,url: url
  369. ,multiple: true
  370. ,accept:'file'
  371. //,auto:false
  372. ,xhr:xhrOnProgress
  373. ,progress:function(value){//上传进度回调 value进度值
  374. $('#' + id + '_progress').show();
  375. element.progress(id + '_progress', value+'%')//设置页面进度条
  376. }
  377. ,choose: function(obj, self){
  378. if (domain) {
  379. obj.editFile(path, cover);
  380. }
  381. element.progress(id + '_progress', '0%')
  382. //layer.load();
  383. }
  384. ,done: function(data, file) {
  385. if (data.hash) {
  386. data.status = 1;
  387. data.name = data.key;
  388. data.url = host + data.key;
  389. $.getJSON(uploadUrl.replace('save.start', 'qiniu.addFile'), {source:file.name,file:data.key, key:key});
  390. }
  391. element.progress(id + '_progress', '0%')
  392. $('#' + id + '_progress').hide();
  393. layer.closeAll('loading');
  394. if (data.status == 1) {
  395. loadUploadSet(e,value,data,key);
  396. } else {
  397. element.progress(id + '_progress', '0%')
  398. layer.alert(data.message);
  399. return false;
  400. }
  401. }
  402. ,error: function(){
  403. //请求异常回调
  404. layer.alert('文件上传错误');
  405. element.progress(id + '_progress', '0%')
  406. $('#' + id + '_progress').hide();
  407. layer.closeAll('loading');
  408. }
  409. });
  410. });
  411. }
  412. function loadUploadSet(e,value,data,key)
  413. {
  414. if (showUploadFilesUploadE) {
  415. showUploadFilesSearch(showUploadFilesUploadE);
  416. return;
  417. }
  418. var mul = e.attr('mul');
  419. var place = e.attr('place');
  420. if (mul == 'yes') {
  421. if (e.attr('t') == 'file') {
  422. if (upload_file[value].length <= 0 && $("#" + value).val()) {
  423. upload_file[value] = $("#" + value).val().split(',');
  424. }
  425. var m = $('.' +value+'_mul');
  426. var i = m.find('li').eq(upload_file[value].length);
  427. if (i.length) {
  428. i.find('a').eq(0).html(data.name);
  429. } else {
  430. 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>');
  431. }
  432. upload_file[value].push(data.url);
  433. $("#" + value).val(upload_file.join(','));
  434. } else {
  435. var i = e.attr('i');
  436. var info = '';
  437. if (data.width) {
  438. info = data.width + '_' + data.height + '_' +data.size + '_' + data.fid;
  439. }
  440. if (upload_pic[value].length <= 0 && $("#" + value).val()) {
  441. upload_pic[value] = $("#" + value).val().split(',');
  442. }
  443. if ($('#'+i).length) {
  444. upload_pic_info[value] = $("#" + i).val().split(',');
  445. }
  446. var m = $('.' +value+'_mul');
  447. var index = m.find('img').eq(upload_pic[value].length);
  448. var set = index.length;
  449. var place = m.find('.place');
  450. if (place.length) {
  451. set = false;
  452. }
  453. if (set) {
  454. index.attr('src', data.url);
  455. index.attr('data-src', data.url);
  456. index.attr('info', info);
  457. } else {
  458. m.append('<a href="javascript:;" title="打开图片管理工具" onclick="picManage($(this), \''+value+'\', \''+key+'\', 2, \''+i+'\', \''+place+'\')"><img src="'+data.url+'" data-src="'+data.url+'" info="'+info+'" width="150" class="cropper_img" style="margin-left:5px;" alt="打开图片管理工具"/></a>');
  459. }
  460. upload_pic[value].push(data.url);
  461. $("#" + value).val(upload_pic[value].join(','));
  462. if ($('#'+i).length && info) {
  463. upload_pic_info[value].push(info);
  464. $('#'+i).val(upload_pic_info[value].join(','));
  465. }
  466. }
  467. } else {
  468. if (e.attr('t') == 'file') {
  469. } else {
  470. var i = e.attr('i');
  471. if ($('#show_'+value).length) {
  472. $('#show_'+value).parent().show();
  473. $('#show_'+value).attr('src',data.url).show();
  474. $('#show_'+value).attr('data-src',data.url);
  475. if (!checkClick($('#show_'+value))) {
  476. $('#show_'+value).unbind('click').bind('click', function()
  477. {
  478. picManage($(this), value, key, 1, i, place);
  479. })
  480. }
  481. }
  482. }
  483. $('#'+value).val(data.url);
  484. if ($('#'+i).length && data.width) {
  485. var info = data.width + '_' + data.height + '_' +data.size + '_' + data.fid;
  486. $('#'+i).val(info);
  487. }
  488. }
  489. }
  490. function picSet(pic, s, info)
  491. {
  492. if (picManageE) {
  493. //$('#'+value).val(data.url);
  494. var img = picManageE.find('img');
  495. var old = img.attr('src');
  496. img.attr('src', pic);
  497. var value = $("#" + picManageV);
  498. value.val(value.val().replace(old, pic));
  499. if (s != 1) {
  500. upload_pic[picManageV].replaceOne(old,pic);
  501. }
  502. var i = picManageI;
  503. if ($('#'+i).length) {
  504. if (s == 1) {
  505. $('#'+i).val(info);
  506. } else {
  507. var old = img.attr('info');
  508. if (old) {
  509. upload_pic_info[picManageV].replaceOne(old,info);
  510. $("#" + i).val(upload_pic_info[picManageV].join(','));
  511. }
  512. }
  513. }
  514. }
  515. layer.close(picManageLayer);
  516. }
  517. function picDel(s)
  518. {
  519. if (!picManageE) {
  520. return;
  521. }
  522. if (confirm('确定要删除图片吗?')) {
  523. var v = picManageV;
  524. var e = picManageE;
  525. var i = picManageI;
  526. if (s == 1) {
  527. e.hide();
  528. $("#" + v).val('');
  529. if ($('#'+i).length) {
  530. $('#'+i).val('');
  531. }
  532. } else {
  533. if (upload_pic[v].length <= 0 && $("#" + v).val()) {
  534. upload_pic[v] = $("#" + v).val().split(',');
  535. }
  536. if (upload_pic_info[v].length <= 0 && $('#'+i).length && $("#" + i).val()) {
  537. upload_pic_info[v] = $("#" + i).val().split(',');
  538. }
  539. var p = e.find('img').attr('src');
  540. e.remove();
  541. upload_pic[v].remove(p);
  542. $("#" + v).val(upload_pic[v].join(','));
  543. if ($('#'+i).length) {
  544. var info = e.find('img').attr('info');
  545. upload_pic_info[v].remove(info);
  546. $("#" + i).val(upload_pic_info[v].join(','));
  547. }
  548. }
  549. }
  550. layer.close(picManageLayer);
  551. }
  552. function picManage(e,v,k,s,i,wh)
  553. {
  554. if (!s) {
  555. s = 2;
  556. }
  557. if (!wh) {
  558. wh = '160*90';
  559. }
  560. picManageE = e;
  561. picManageV = v;
  562. picManageI = i;
  563. var param = '';
  564. var img = e.find('img');
  565. if (img.attr('data-src')) {
  566. var pic = img.attr('data-src');
  567. param = img.attr('src');
  568. } else {
  569. var pic = img.attr('src');
  570. img.attr('data-src', pic);
  571. }
  572. if (pic.indexOf('temp.im') != -1) {
  573. return;
  574. }
  575. var url = config.upload.replace('save', 'view') + '.manage&state='+s+'&key='+k+'&pic=' + pic + '&param=' + param+'&wh='+wh;
  576. var layerConfig = {
  577. type: 2,
  578. title: '图片裁剪工具',
  579. content : [url, 'no'],
  580. shade: 0.1,
  581. shadeClose : true,
  582. area: ['1000px','550px']
  583. };
  584. picManageLayer = layer.open(layerConfig);
  585. }
  586. function fileDel(e,v)
  587. {
  588. if(confirm('确定要删除文件吗?'))
  589. {
  590. if(upload_file[v].length <= 0 && $("#" + v).val())
  591. {
  592. upload_file[v] = $("#" + v).val().split(',');
  593. }
  594. var parent = e.parent();
  595. var p = parent.find('a').eq(0).attr('href');
  596. parent.remove();
  597. upload_file[v].remove(p);
  598. //console.info(pic);
  599. $("#" + v).val(upload_file[v].join(','));
  600. }
  601. }