upload.js 17 KB

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