upload.js 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791
  1. /**
  2. *upload
  3. *
  4. */
  5. $(function() {
  6. (function($) {
  7. "use strict";
  8. $.fn.uploadFile = function(options) {
  9. var bool_validation = true; //是否要初始化validation
  10. if (options.validation == "null") {
  11. bool_validation = false;
  12. /* 改,去掉 "",去掉重复的,去掉大写的。Lin
  13. * 相应的 <ul.ss type='"jpg","png"' 也改为 "jpg,png" 了
  14. options.validation =
  15. '"JPG","JPEG","PNG","TIF","TIFF","GIF","MP3","MP4","HTML","HTM","SWF","PPT","PPTX","DOC","DOCX","PDF","XLS","XLSX","ZIP","RAR","BMP","flv","swf","mkv","avi","rm","rmvb","mpeg","mpg","ogg","ogv","mov","wmv","mp4","webm","mp3","wav","mid","png","jpg","jpeg","tif","tiff","gif","bmp","flv","swf","mkv","avi","rm","rmvb","mpeg","mpg","ogg","ogv","mov","wmv","mp4","webm","mp3","wav","mid","rar","zip","tar","gz","7z","bz2","cab","iso","doc","docx","xls","xlsx","ppt","pptx","pdf","txt","md","xml","png","jpg","jpeg","gif","bmp","flv","swf","mkv","avi","rm","rmvb","mpeg","mpg","ogg","ogv","mov","wmv","mp4","webm","mp3","wav","mid","rar","zip","tar","gz","7z","bz2","cab","iso","doc","docx","xls","xlsx","ppt","pptx","pdf","txt","md","xml"'; //用来验证文件类型
  16. */ options.validation = "jpg,jpeg,png,tif,tiff,gif,bmp,"+
  17. "mp3,wav,ogg,mid,"+
  18. "mp4,mov,wmv,webm,ogv,flv,swf,mkv,avi,rm,rmvb,mpeg,mpg,"+
  19. "html,htm,doc,docx,xls,xlsx,ppt,pptx,pdf,txt,md,xml,"+
  20. "zip,rar,tar,gz,7z,bz2,cab,iso"; //用来验证文件类型
  21. }
  22. //console.log(options.validation);
  23. var uploadParam = {
  24. app: wd.app?wd.app.name:getAccountInfo().xmmc,
  25. /* 再改,规范命名。Lin
  26. * 去掉 ?wdApplication=,不支持多个应用 -- 服务名可以写 ss.xxx
  27. * &wdService= 改为 ssServ
  28. action: "/service?wdApplication=wd&wdService=ulByA&type="+ options.type, // =uploadForAjax",。"表单的action"。Lin
  29. */ action: "/service?ssServ=ulByHttp&type="+ options.type, // =uploadForAjax",。"表单的action"。Lin
  30. validation: null,
  31. size: null, //文件大小 单位KB
  32. name: null,
  33. callback: null,
  34. imageCropping: true,
  35. beforeClick:null //点击触发前事件 如果返回false不触发click,wd.edit.initPhoto
  36. },
  37. settings = $.extend({}, uploadParam, options),
  38. formId = "uploadform";
  39. $(document.body).on("change", "[id='" + settings.name + "Edit_File']", onChange);
  40. //console.log(settings.validation);
  41. return this.each(function() {
  42. var name = settings.name;
  43. //var $this = $('#'+name);//Edit
  44. // $("#" + name + "Edit").on("click", onClick);
  45. $(this).on("click", onClick);
  46. /* 再改回 wj,支持 "sltwj"。Lin
  47. * 增加 wjInputVal
  48. if ($('input[name="' + name + 'BaseName"]').val() == "") { // + 'wj"]').。Lin
  49. */
  50. var wjInputVal = $('input[name="'+ name +'wj"]').val();
  51. if (wjInputVal == "") {
  52. $("[id='qx" + name+"']").hide();
  53. $("[id='check" + name+"']").hide();
  54. } else {
  55. /* 再改回 wj,支持 "sltwj"。Lin
  56. * 增加 wjInputVal
  57. $('[id=\'' + name + 'BaseName\']').html($('input[name="' + name + 'BaseName"]').val().substr($('input[name="' + name + 'BaseName"]') // + 'Name\']').,+ 'wj"]').,+ 'wj"]')。Lin
  58. .val().lastIndexOf('/') + 1));
  59. */ $('[id=\''+ name +'BaseName\']').html(wjInputVal.substr(wjInputVal.lastIndexOf('/') + 1)); // + 'Name\']').。Lin
  60. }
  61. //var id = $this.attr("id");
  62. /* 再改回 wj,支持 "sltwj"。Lin
  63. * 增加 wjInputVal
  64. var path = $('input[name="' + name + 'BaseName"]').val(); // + 'wj"]').。Lin
  65. */ var path = wjInputVal;
  66. formId = name + "uploadform";
  67. /* 改,改为 id="xxxEdit"。Lin
  68. var multiple = $('input[name="' + name + 'Edit"]').attr("multiple");
  69. */ var multiple = $('[id="'+ name +'Edit"]').attr("multiple");
  70. //产生新的隐藏form用来上传文件
  71. var form = "<div hidden='hidden' id='" + name + "uploadformDiv' name='uploadformDiv' ><form id='" + name +
  72. "uploadform' action=" + settings.action + " method='post' enctype='multipart/form-data' >";
  73. if (path) {
  74. form += "<input type='hidden' name='path' id='" + name + "path' value='" + path + "'/>";
  75. }
  76. form += "<input type='file' name='fileEdit' id='" + name + "Edit_File' fileid='" + name + "' ";
  77. if (multiple) {
  78. form += "multiple";
  79. }
  80. form += "/>";
  81. form += "<input type='hidden' name='application' id='" + settings.app + "'/>";
  82. form += "</form></div>";
  83. $("body").append(form);
  84. });
  85. function onClick() {
  86. if(settings.beforeClick){
  87. if(false==settings.beforeClick.call(this)){
  88. return ;
  89. }
  90. }
  91. //var id = $(this).attr("id");
  92. var name = settings.name;
  93. var path = $("input[name='" + name + "wj']").val();
  94. $("[id='" + name + "path']").val(path);
  95. $("[id='" + name + "Edit_File']").click();
  96. }
  97. //console.log(this.files[0].name);
  98. function onChange(e, finalsubmit) {
  99. var THIS = this;
  100. var filesLength = this.files.length; //用来判断是否选择文件
  101. var fileSize = Math.round(this.files[0].size / 1024 * 100) / 100;
  102. if (filesLength > 0) {
  103. if (settings.validation != undefined && settings.validation != 'null' && settings.validation != null &&
  104. settings.validation.length > 0) {
  105. var fileExt = this.files[0].name.replace(/.+\./, "").toLowerCase();
  106. //console.log(fileExt);
  107. var flag = false;
  108. var filetype = settings.validation.split(",");
  109. //var filetype = settings.validation
  110. $.each(filetype, function() {
  111. /* 改,.validation 去掉 ""、去掉重复的、去掉大写的。Lin
  112. * 相应的 <ul.ss type='"jpg","png"' 也改为 "jpg,png" 了
  113. if (this.toLowerCase() == ("\"" + fileExt + "\"")) {
  114. */ if (this == fileExt) {
  115. flag = true;
  116. return false;
  117. }
  118. });
  119. if (!flag) {
  120. if (bool_validation) {
  121. alert("请上传" + settings.validation + "格式文件!");
  122. } else {
  123. alert("请不要上传" + fileExt + "格式文件!");
  124. }
  125. return;
  126. }
  127. }
  128. if (fileSize > settings.size && settings.size > 0) {
  129. alert("上传文件大于" + settings.size + "KB");
  130. return;
  131. }
  132. settings.onchange && settings.onchange.call(this, settings);
  133. var progressHtml = '<div class="progress"><div class="bar"></div ><div class="percent">0%</div ></div>', //进度条HTML
  134. fileid = $(this).attr("fileid"), //获取button的id
  135. $fileName = $("[id='"+ fileid +"BaseName']"), // + "Name']"),。Lin
  136. defaultOption = { //默认的参数,可进行自定义
  137. type: 'post',
  138. dataType: 'json',
  139. beforeSubmit: function() {
  140. //console.log('beforeSubmit');
  141. $('[id=\'' + fileid+'\']').attr('disabled', 'disabled');
  142. $('[id=\'' + fileid+'\']').attr('class', 'disabled-button');
  143. },
  144. beforeSend: function() {
  145. //console.log('beforeSend');
  146. $('[id=\'' + fileid + 'BaseName\']').empty(); // + 'Name\']').。Lin
  147. $('[id=\'' + fileid + 'BaseName\']').append(progressHtml); // + 'Name\']').。Lin
  148. var percentVal = '0%';
  149. $('.bar').width(percentVal)
  150. $('.percent').html(percentVal);
  151. },
  152. uploadProgress: function(event, positon, total, percentComplete) { //进度条
  153. // console.log('uploadProgress');
  154. var percentVal = percentComplete + '%';
  155. $('.bar').width(percentVal)
  156. $('.percent').html(percentVal);
  157. },
  158. success: function(result) { //ajax上传成功
  159. var fileNames = "";
  160. var paths = "";
  161. var fileList = result.fileList;
  162. // console.log('result.size=' + result.fileList);
  163. for (var i = 0; i < fileList.length; i++) {
  164. fileNames += fileList[i].fileName;
  165. paths += fileList[i].path;
  166. if (i < fileList.length - 1) {
  167. fileNames += ";";
  168. paths += ";";
  169. }
  170. }
  171. //console.log('fileNames:'+fileNames);
  172. //console.log('paths:'+paths);
  173. // console.log('success');
  174. var percentVal = '100%';
  175. $('.bar').width(percentVal)
  176. $('.percent').html(percentVal);
  177. $('[id=\'' + fileid+'\']').removeAttr('disabled');
  178. $('[id=\'' + fileid+'\']').attr('class', 'list-button');
  179. /* 改,<span id="xxxBaseName"。Lin
  180. $('[id=\'' + fileid + 'Name'+'\']').html(fileNames); //原取值方式为result.fileName 后改为result.fileList[0].fileName(各个环境底层不一样,需兼容)
  181. */ $('[id=\''+ fileid +'BaseName\']').html(fileNames); //原取值方式为result.fileName 后改为result.fileList[0].fileName(各个环境底层不一样,需兼容)
  182. /* 改,paths > fileNames。Lin
  183. * 再改回 wj,并用回 paths,支持 "sltwj"
  184. $('input[name="' + fileid + 'wj"]').val(paths); //原取值方式为result.path 后改为result.fileList[0].path
  185. */ $('input[name="'+ fileid +'wj"]').val(paths);
  186. /// 再增加,<input name="xxxBaseName" -- paths 使用 UUID 了。Lin
  187. $('input[name="'+ fileid +'BaseName"]').val(fileNames);
  188. ///
  189. /* 改,cmsAdd.ss.jsp 里加 <input name='wpath'>。Lin
  190. $('[id=\'' + fileid + "path"+'\']').val(paths); //原取值方式为result.path 后改为result.fileList[0].path
  191. */
  192. /* 再去掉,共用 wj。Lin
  193. $('input[name="'+ fileid +'FileName"]').val(paths); //原取值方式为result.path 后改为result.fileList[0].path
  194. */
  195. $("[id='qx" + fileid+'\']').show();
  196. $("[id='check" + fileid+'\']').show();
  197. if (settings.callback != null && settings.callback != 'null' && settings.callback != undefined)
  198. settings.callback(result);
  199. },
  200. error: function(result) {
  201. //console.log('error');
  202. alert('上传失败');
  203. $('[id=\''+ fileid +'BaseName'+'\']').html(''); // + 'Name'+'\']').。Lin
  204. $('[id=\'' + fileid + 'Edit_File'+'\']').removeAttr('disabled');
  205. $('[id=\'' + fileid + 'Edit_File'+'\']').attr('class', 'list-button');
  206. //console.log(result);
  207. }
  208. },
  209. ajaxParam = $.extend({}, defaultOption, settings);
  210. //console.log(ajaxParam);
  211. if (ajaxParam.imageCropping && /\.(jpg|jpeg|png|)$/i.test(this.files[0].name)) {
  212. initCropper(THIS, ajaxParam, (function() {
  213. return function(result) {
  214. ajaxParam.success(result)
  215. }
  216. })());
  217. // bySPACE 20190612
  218. // 清空文件,防止多次上传同一张图片时无法被change捕获
  219. $(this).val("");
  220. } else {
  221. $('[id=\'' + formId+'\'').ajaxSubmit(ajaxParam); //调用from.js的ajax提交表单
  222. }
  223. }
  224. }
  225. };
  226. })(jQuery);
  227. });
  228. /**
  229. * 裁剪 :)
  230. * bySPACE 20190604
  231. */
  232. var wdCropper = {};
  233. function initWdCropper() {
  234. wdCropper = {
  235. topWin: undefined,
  236. layer: { // 弹层
  237. show: function(param) { // 弹出
  238. /* 再改,启用引入 .css、.js 语句 -- yx_zjz.js(迎新拍证件照) 时,会导致 resize( 里的 .Tdrag() 抛出异常 -- 没有引入 Tdrag.min.js。Lin
  239. * wdCropper.topWin.$("#space-cropper-panel").Tdrag();
  240. * wdCropper.topWin.$("#cropper").Tdrag();
  241. * 不能启用 wdCropper.layer.close(),会导致 上传 > 裁剪图片 时没显示裁剪窗口
  242. * 另,下面的 close( 里,也启用清除 .css、.js 语句
  243. //wdCropper.layer.close();
  244. //wdCropper.topWin.$("html").append('<link rel="stylesheet" type="text/css" href="/wd/js/Cropper/cropper-master/dist/cropper.css" />');
  245. //wdCropper.topWin.$("html").append('<script src="/wd/js/Cropper/cropper-master/dist/cropper.js"></script>');
  246. //wdCropper.topWin.$("html").append('<script src="/wd/js/Cropper/drag/Tdrag.min.js"></script>');
  247. */
  248. wdCropper.topWin.$("html").append('<link rel="stylesheet" type="text/css" href="/ss/Cropper/cropper-master/dist/cropper.css" />');
  249. wdCropper.topWin.$("html").append('<script src="/ss/Cropper/cropper-master/dist/cropper.js"></script>');
  250. wdCropper.topWin.$("html").append('<script src="/ss/Cropper/drag/Tdrag.min.js"></script>');
  251. var panelHtml =
  252. '<div id="space-cropper-panel" style="z-index:20190606;padding-top:5px;padding-bottom:5px;" class="space-cropper-panel floatToolbar-div">' +
  253. '<div id="zoom_btn" style="margin-left:5px;margin-bottom:5px;" class="space-cropper-panel-btn toolbar-button icon-zoomIn" onclick="wd.topWindow.wdCropper.cropper.zoom();" onmousedown="wd.topWindow.wdCropper.cropper.ZN_auto(`z`);" onmouseup="wd.topWindow.wdCropper.cropper.endFlag();" onmouseout="wd.topWindow.wdCropper.cropper.endFlag();" ></div>' +
  254. '<div class="space-cropper-panel-btn toolbar-button icon-zoomOut" style="margin-left:5px;margin-bottom:5px;" onclick="wd.topWindow.wdCropper.cropper.narrow();" onmousedown="wd.topWindow.wdCropper.cropper.ZN_auto(`n`);" onmouseup="wd.topWindow.wdCropper.cropper.endFlag();" onmouseout="wd.topWindow.wdCropper.cropper.endFlag();" ></div>' +
  255. '<span id="bl" class="bl hLine" style="display:inline-block;width:calc(100% - 2px);margin-left:1px;text-align:center;line-height:20px;margin-bottom:5px;"></span>' +
  256. '<div class="space-cropper-panel-btn toolbar-button icon-leftRotation" style="margin-left:5px;margin-bottom:5px;" onclick="wd.topWindow.wdCropper.cropper.rotate_left();" onmousedown="wd.topWindow.wdCropper.cropper.RL_auto(`l`);" onmouseup="wd.topWindow.wdCropper.cropper.endFlag();" onmouseout="wd.topWindow.wdCropper.cropper.endFlag();" ></div>' +
  257. '<div class="space-cropper-panel-btn toolbar-button icon-rightRotation" style="margin-left:5px;margin-bottom:5px;" onclick="wd.topWindow.wdCropper.cropper.rotate_right();" onmousedown="wd.topWindow.wdCropper.cropper.RL_auto(`r`);" onmouseup="wd.topWindow.wdCropper.cropper.endFlag();" onmouseout="wd.topWindow.wdCropper.cropper.endFlag();" ></div>' +
  258. '<span id="jd" class="jd hLine" style="display:inline-block;width:calc(100% - 2px);margin-left:1px;text-align:right;line-height:20px;margin-bottom:5px;" ></span>' +
  259. '<div class="space-cropper-panel-btn toolbar-button invertIcon-save" style="margin-left:8px;margin-bottom:5px;" onclick="wd.topWindow.wdCropper.cropper.getCroppedCanvas();"></button>' +
  260. '</div>';
  261. wdCropper.topWin.$("body").append('<div id="shade" class="space-shade"></div>');
  262. wdCropper.topWin.$("body").append(
  263. '<div id="cropper" style="display:none;z-index: 999;" class="space-layer lightDialog-div"><div id="showSize" class="area-msg" style="position: absolute; z-index: 999999999999999999999; top: 40px; right: 4px;height:19px;line-height:19px;"></div><div class="space-layer-head lightDialog-title"><span onclick="wd.topWindow.wdCropper.layer.full();" style="position:absolute;right:37px;top:10px;" class="icon-fullscreen"></span><span style="display:none;position:absolute;right:37px;top:10px;" onclick="wd.topWindow.wdCropper.layer.full();" class="icon-restore"></span><span class="icon-close" onclick="wd.topWindow.wdCropper.layer.close();" ></span></div><div id="space-layer-body" style="padding:0px;box-sizing:border-box;margin-left:10px;" class="space-layer-body"><img id="cropperImage" src="" />' +
  264. panelHtml + '</div></div>');
  265. wdCropper.topWin.$("body").append(
  266. '<div id="imgInfo" class="area-msg" style="display:none; position: absolute;z-index: 999999999999999999999; display: none;width:max-content;text-align:center;"><span style="display:inline-block;height:16px;line-height:16px;">W:<span id="width"></span></span><br><span style="display:inline-block;height:16px;line-height:16px;">H:<span id="height"></span></span></div>'
  267. );
  268. var cw = wdCropper.topWin.document.body.clientWidth,
  269. ch = wdCropper.topWin.document.body.clientHeight;
  270. if (!param) { // 默认全屏
  271. param = {
  272. width: cw - 20,
  273. height: ch - 20
  274. }
  275. } else { // 超出屏幕大小的话就默认全屏
  276. if (param.width > cw || param.height > ch) {
  277. param = {
  278. width: cw - 50,
  279. height: ch - 50
  280. }
  281. }
  282. }
  283. wdCropper.layer.resize({
  284. width: param.width + 20,
  285. height: param.height + 40
  286. })
  287. wdCropper.topWin.$("#cropper").fadeIn();
  288. },
  289. resize: function(size) { // 重置大小,最小不能小于200*200
  290. if (size) {
  291. if(size.width < 200) {
  292. size.width = 220;
  293. }
  294. if(size.height < 200) {
  295. size.height = 200;
  296. }
  297. }
  298. var c = wdCropper.topWin.$("#cropper");
  299. $(c).width(size.width + "px");
  300. $(c).height(size.height + "px");
  301. $(c).css({
  302. "top": ((wdCropper.topWin.document.body.clientHeight - size.height) / 2) + "px",
  303. "left": ((wdCropper.topWin.document.body.clientWidth - size.width) / 2) + "px"
  304. });
  305. var b = wdCropper.topWin.$("#space-layer-body");
  306. $(b).height(($(c).height() - 40) + "px");
  307. $(b).width(($(c).width() - 20) + "px");
  308. var p = wdCropper.topWin.$("#space-cropper-panel");
  309. var t = (($(c).height() / 2) - 210);
  310. t = t < 40 ? 50 : t;
  311. $(p).css({
  312. "top": t + "px",
  313. });
  314. wdCropper.topWin.$("#space-cropper-panel").Tdrag();
  315. wdCropper.topWin.$("#cropper").Tdrag();
  316. },
  317. fullIndex: 1,
  318. full: function(type) { // 全屏Tg
  319. if (wdCropper.layer.fullIndex == 1) {
  320. wdCropper.layer.fullScreen();
  321. wdCropper.layer.fullIndex = 2;
  322. wdCropper.topWin.$(".icon-fullscreen").hide();
  323. wdCropper.topWin.$(".icon-restore").show();
  324. } else {
  325. wdCropper.layer.exitScreen();
  326. wdCropper.layer.fullIndex = 1;
  327. // wdCropper.topWin.$(".icon-fullscreen").removeClass("icon-zoomOut");
  328. wdCropper.topWin.$(".icon-fullscreen").show();
  329. wdCropper.topWin.$(".icon-restore").hide();
  330. }
  331. },
  332. fullScreen: function() { // 全屏
  333. var el = wdCropper.topWin.document.documentElement;
  334. var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
  335. if (typeof rfs != "undefined" && rfs) {
  336. rfs.call(el);
  337. };
  338. return;
  339. },
  340. exitScreen: function() { // 退出全屏
  341. var d = wdCropper.topWin.document;
  342. if (d.exitFullscreen) {
  343. d.exitFullscreen();
  344. } else if (d.mozCancelFullScreen) {
  345. d.mozCancelFullScreen();
  346. } else if (d.webkitCancelFullScreen) {
  347. d.webkitCancelFullScreen();
  348. } else if (d.msExitFullscreen) {
  349. d.msExitFullscreen();
  350. }
  351. if (typeof cfs != "undefined" && cfs) {
  352. cfs.call(el);
  353. }
  354. },
  355. close: function() { // 关闭
  356. wdCropper.topWin.$("#shade").remove();
  357. wdCropper.topWin.$("#cropper").remove();
  358. wdCropper.topWin.$("#imgInfo").remove();
  359. /* 再改,启用清除 .css、.js 语句 -- 上面的 show(,启用了引入 .css、.js 语句。Lin
  360. //wdCropper.topWin.$("html link[href='/wd/js/Cropper/cropper-master/dist/cropper.css']").remove();
  361. //wdCropper.topWin.$("html script[src='/wd/js/Cropper/cropper-master/dist/cropper.js']").remove();
  362. //wdCropper.topWin.$("html script[src='/wd/js/Cropper/drag/Tdrag.min.js']").remove();
  363. */
  364. wdCropper.topWin.$("html link[href='/ss/Cropper/cropper-master/dist/cropper.css']").remove();
  365. wdCropper.topWin.$("html script[src='/ss/Cropper/cropper-master/dist/cropper.js']").remove();
  366. wdCropper.topWin.$("html script[src='/ss/Cropper/drag/Tdrag.min.js']").remove();
  367. wd.topWindow.$("#cropiframe").hide();
  368. }
  369. },
  370. cropper: {
  371. fileName: null,
  372. $image: undefined, // cropper实例,由init时赋值
  373. changeflag: false, // 是否被拖动标记,如被拖动为真,否则为假
  374. autoSizeFlag: 0, // 累计加载完毕次数
  375. imageURL: undefined, // BASE64 图像
  376. startInterval: undefined, // 连续操作的定时器对象
  377. startIntervalType: undefined, // 连续操作的类型
  378. rotatingNumber: 0, // 旋转度数
  379. img: undefined,
  380. init: function() {
  381. // 通过指定的宽和高计算裁剪框比例,出现小数向上取整
  382. var _widthRatio = 0,
  383. _heightRatio = 0,
  384. ratioFlag = false;
  385. if (wdCropper.settings.width && wdCropper.settings.height) {
  386. ratioFlag = true;
  387. _widthRatio = (wdCropper.settings.width / 100).toFixed(2);
  388. _heightRatio = (wdCropper.settings.height / 100).toFixed(2);
  389. }
  390. wdCropper.cropper.$image = wdCropper.topWin.$("#cropperImage");
  391. wdCropper.cropper.$image.cropper({
  392. aspectRatio: ratioFlag ? _widthRatio / _heightRatio : undefined,
  393. viewMode: 0, // 视点模式:【0:无限制;1:不能超出裁剪区域;】
  394. dragMode: 'move', // 拖曳模式:'crop'*创建一个新的麦田盒,'move'*移动画布,'none'*无所事事
  395. modal: true, // 是否显示黑色遮罩
  396. guides: true, // 显示麦田盒上方的虚线。
  397. center: true, // 显示位于“作物”框上方的中心指示器。
  398. highlight: true, // 在“作物”框上方显示白色模式(突出显示“作物”框)。
  399. background: true, // 是否显示透明背景
  400. movable: false, // 是否可以移动图像
  401. rotatable: true, // 可旋转
  402. scalable: true, // 可伸缩
  403. zoomable: true, // 可缩放
  404. responsive: true, // 调整窗口大小时,重新渲染裁剪器
  405. zoomOnWheel: false, // 通过移动鼠标使图像能够缩放
  406. wheelZoomRatio: 0.1, // 定义缩放比率时,通过鼠标旋转放大图像。(滚动时放大或缩小的比例)
  407. cropBoxMovable: true, // 通过拖动启用移动“裁剪”框。
  408. CropBoxResizable: false, // 可以通过拖动调整裁剪框的大小
  409. crop: function(event) { // 移动开始时
  410. try {
  411. if (!wdCropper.cropper.changeflag) {
  412. wdCropper.topWin.$("#imgInfo").show();
  413. }
  414. var offset = wdCropper.topWin.$(".cat").offset();
  415. if (offset != undefined) {
  416. wdCropper.topWin.$("#imgInfo").css({
  417. "left": (offset.left + 30) + "px",
  418. "top": (offset.top - 9) + "px"
  419. });
  420. }
  421. var d = wdCropper.cropper.$image.data('cropper').getData();
  422. wdCropper.topWin.$("#width").html(Math.round(d.width));
  423. wdCropper.topWin.$("#height").html(Math.round(d.height));
  424. if (!wdCropper.settings.width) {
  425. wdCropper.topWin.$("#showSize").html("" + Math.round(d.width) + " X " + Math.round(d.height) + "");
  426. }
  427. // 计算比例
  428. wdCropper.cropper.getRatio();
  429. } catch (e) {
  430. console.log(e);
  431. }
  432. return false;
  433. },
  434. cropend: function() { // 移动停止时
  435. wdCropper.topWin.$("#imgInfo").hide();
  436. wdCropper.cropper.changeflag = false;
  437. },
  438. ready: function() { // 渲染完毕时
  439. wd.topWindow.wdCropper = wdCropper;
  440. wdCropper.cropper.initDragStyle();
  441. wdCropper.topWin.$("#imgInfo").hide();
  442. // 图片小于200*100就会被Cropper放大,接下来要做的就是把图片还原到原大小
  443. var cd = wdCropper.cropper.$image.data('cropper').getCanvasData(); // 当前画布中的图片大小
  444. var img = wdCropper.cropper.$image.data('cropper').getImageData(); // 图片实际大小
  445. wdCropper.cropper.img = img;
  446. if (img.width < 200 || img.height < 200) {
  447. wdCropper.cropper.$image.data('cropper').setCanvasData({
  448. width: img.naturalWidth,
  449. height: img.naturalHeight,
  450. left: (200 - img.naturalWidth) / 2,
  451. top: (200 - img.naturalHeight) / 2,
  452. });
  453. }
  454. if (img) {
  455. wdCropper.cropper.getRatio();
  456. }
  457. // setting中没有指定裁剪宽和高,就设置裁剪框和图片一样大
  458. if (!wdCropper.settings.width) {
  459. var cd2 = wdCropper.cropper.$image.data('cropper').getCanvasData(); // 当前画布中的图片大小
  460. wdCropper.cropper.$image.data('cropper').setCropBoxData({
  461. "width": cd2.width,
  462. "height": cd2.height
  463. })
  464. }
  465. // 解决部分屏幕初始化后裁剪框无法居中的问题
  466. var w = wdCropper.cropper.$image.data('cropper').getContainerData().width;
  467. wd.topWindow.wdCropper.cropper.$image.data('cropper').setCropBoxData({
  468. left: (w - wd.topWindow.wdCropper.cropper.$image.data('cropper').getCropBoxData().width) / 2
  469. });
  470. // setTimeout(function() {
  471. // }, 500);
  472. }
  473. });
  474. },
  475. keepTwoDecimal: function(num) { // 四舍五入,保留一位小数
  476. return Math.round(num * 10) / 10;
  477. },
  478. replace: function replace(url) { // 重新渲染裁剪框
  479. wdCropper.cropper.imageURL = url;
  480. wdCropper.cropper.$image.data('cropper').replace(url, false);
  481. },
  482. zoom: function() { // 放大
  483. wdCropper.cropper.changeflag = true;
  484. var cd = wdCropper.cropper.$image.data('cropper').getCanvasData(); // 当前画布中的图片大小
  485. var img = wdCropper.cropper.$image.data('cropper').getImageData(); // 图片实际大小
  486. if (cd.width >= img.naturalWidth || cd.height >= img.naturalHeight) {
  487. wdCropper.topWin.$("#zoom_btn").removeClass("icon-zoomIn").addClass("disableIcon-zoomIn");
  488. return false;
  489. }
  490. wdCropper.cropper.$image.cropper("zoom", 0.01);
  491. },
  492. narrow: function() { // 缩小
  493. wdCropper.cropper.changeflag = true;
  494. wdCropper.cropper.$image.cropper("zoom", -0.01);
  495. wdCropper.topWin.$("#zoom_btn").removeClass("disableIcon-zoomIn").addClass("icon-zoomIn");
  496. },
  497. ZN_auto: function(type) { // 连续放大或缩小
  498. window.clearInterval(wdCropper.cropper.startInterval);
  499. type = wdCropper.cropper.startIntervalType = type;
  500. wdCropper.cropper.startInterval = setInterval(function() {
  501. if (type.trim() == 'z') {
  502. wdCropper.cropper.zoom();
  503. } else {
  504. wdCropper.cropper.narrow();
  505. }
  506. }, 100);
  507. },
  508. rotate_left: function() { // 逆时针
  509. wdCropper.cropper.rotatingNumber--;
  510. wdCropper.cropper.changeflag = true;
  511. wdCropper.cropper.$image.cropper("rotate", -1);
  512. wdCropper.topWin.$("#jd").html(wdCropper.cropper.rotatingNumber + "°");
  513. },
  514. rotate_right: function() { // 顺时针
  515. wdCropper.cropper.rotatingNumber++;
  516. wdCropper.cropper.changeflag = true;
  517. wdCropper.cropper.$image.cropper("rotate", 1);
  518. wdCropper.topWin.$("#jd").html(wdCropper.cropper.rotatingNumber + "°");
  519. },
  520. endFlag: function() { // 结束循环
  521. window.clearInterval(wdCropper.cropper.startInterval);
  522. },
  523. RL_auto: function(type) { // 连续旋转
  524. window.clearInterval(wdCropper.cropper.startInterval);
  525. type = wdCropper.cropper.startIntervalType = type;
  526. wdCropper.cropper.startInterval = setInterval(function() {
  527. if (type.trim() == 'l') {
  528. wdCropper.cropper.rotate_left();
  529. } else {
  530. wdCropper.cropper.rotate_right();
  531. }
  532. }, 100);
  533. },
  534. getRatio: function() { // 获取图片缩放比例
  535. try {
  536. var id = wdCropper.cropper.$image.data('cropper').getImageData();
  537. //console.log("id=" + id)
  538. if (id && id.width) {
  539. var bl = wdCropper.cropper.keepTwoDecimal(id.width / wdCropper.cropper.img.width);
  540. wdCropper.topWin.$("#bl").html(bl == 1 ? "1:1" : bl);
  541. }
  542. } catch (e) {
  543. console.log(e);
  544. }
  545. },
  546. initDragStyle: function() { // 初始化裁剪框
  547. wdCropper.topWin.$("span.line-e").remove();
  548. wdCropper.topWin.$("span.line-n").remove();
  549. wdCropper.topWin.$("span.line-w").remove();
  550. wdCropper.topWin.$("span.line-s").remove();
  551. wdCropper.topWin.$("span.point-e").remove();
  552. wdCropper.topWin.$("span.point-n").remove();
  553. wdCropper.topWin.$("span.point-w").remove();
  554. wdCropper.topWin.$("span.point-s").remove();
  555. wdCropper.topWin.$("span.point-ne").remove();
  556. wdCropper.topWin.$("span.point-nw").remove();
  557. wdCropper.topWin.$("span.point-sw").remove();
  558. wdCropper.topWin.$("span.point-se").addClass("cat plugin-drag");
  559. wdCropper.topWin.$("span.point-se").mousemove(function() {
  560. wdCropper.cropper.changeflag = false;
  561. });
  562. wdCropper.topWin.$(".cropper-modal").addClass("dialog-mask");
  563. wdCropper.topWin.$(".cropper-view-box").addClass("area-div");
  564. if (!wdCropper.settings.width) {
  565. var d = wdCropper.cropper.$image.data('cropper').getData();
  566. wdCropper.topWin.$("#showSize").html("" + Math.round(d.width) + " X " + Math.round(d.height) + "");
  567. } else {
  568. wdCropper.topWin.$("#showSize").html("" + wdCropper.settings.width + " X " + wdCropper.settings.height + "");
  569. }
  570. wdCropper.topWin.$("#jd").html("0°");
  571. },
  572. getCroppedCanvas: function() { // 获取裁剪图片
  573. var myForm = undefined; // 最终上传的表单
  574. // 新增需求:裁剪框和图片大小一致的情况下,直接上传原图,不再进行裁剪操作
  575. var canvasData = wdCropper.cropper.$image.data('cropper').getCanvasData(); // 画布大小
  576. var cropBoxData = wdCropper.cropper.$image.data('cropper').getCropBoxData(); // 裁剪框大小
  577. if (canvasData.width == cropBoxData.width && canvasData.height == cropBoxData.height) {
  578. //console.log("原图上传");
  579. var myForm = new FormData();
  580. myForm.append("application", "");
  581. myForm.append("fileEdit", wdCropper.fileObj);
  582. } else {
  583. var hce = wdCropper.cropper.$image.data('cropper').getCroppedCanvas({
  584. width: wdCropper.settings.width,
  585. height: wdCropper.settings.height,
  586. fillColor: '#FFF'
  587. });
  588. var src = hce.toDataURL("image/jpeg");
  589. var dataURLtoBlob = function(dataurl) {
  590. var arr = dataurl.split(','),
  591. mime = arr[0].match(/:(.*?);/)[1],
  592. bstr = atob(arr[1]),
  593. n = bstr.length,
  594. u8arr = new Uint8Array(n);
  595. while (n--) {
  596. u8arr[n] = bstr.charCodeAt(n);
  597. }
  598. return new Blob([u8arr], {
  599. type: mime
  600. });
  601. }
  602. var newFile = new File([dataURLtoBlob(src)], wdCropper.cropper.fileName);
  603. wdCropper.fileEle.files[0] = newFile;
  604. var myForm = new FormData();
  605. myForm.append("application", "");
  606. myForm.append("fileEdit", newFile);
  607. }
  608. //console.log(wdCropper.settings.action);
  609. $.ajax({
  610. url: wdCropper.settings.action,
  611. type: "POST",
  612. data: myForm,
  613. processData: false, // 告诉jQuery不要去处理发送的数据
  614. contentType: false, // 告诉jQuery不要去设置Content-Type请求头
  615. error: function() {
  616. wdCropper.layer.close();
  617. setTimeout(function() {
  618. this.wdCropper = undefined;
  619. wd.topWindow.wdCropper = undefined;
  620. }, 1000);
  621. },
  622. success: function(result) {
  623. result = eval("(" + result + ")");
  624. if (wdCropper.cropConfirm) {
  625. wdCropper.cropConfirm.call(wdCropper.thisWindow, result)
  626. }
  627. wdCropper.layer.close();
  628. setTimeout(function() {
  629. this.wdCropper = undefined;
  630. wd.topWindow.wdCropper = undefined;
  631. }, 1000);
  632. }
  633. });
  634. }
  635. }
  636. }
  637. }
  638. //裁剪
  639. function initCropper(fileEle, settings, cropConfirm) {
  640. initWdCropper();
  641. wdCropper.fileEle = fileEle;
  642. var files = fileEle.files;
  643. if (files && files.length) {
  644. if (!!!/^image\/\w+$/.test(files[0].type)) {
  645. window.alert('Please choose an image file.');
  646. return
  647. }
  648. } else {
  649. return;
  650. }
  651. wdCropper.thisWindow = window;
  652. wdCropper.settings = settings;
  653. wdCropper.cropConfirm = cropConfirm;
  654. var file = files[0];
  655. wdCropper.cropper.fileName = file.name;
  656. wdCropper.fileObj = file;
  657. //生成裁剪窗口
  658. if(wd.topWindow){
  659. wd.topWindow.$("#cropiframe").remove();
  660. }else{
  661. wd.topWindow = top;
  662. }
  663. var cropiframe = $(
  664. "<iframe style=\"width:100%;height:100%;position:absolute;z-index:1000;display:none;\" id=\"cropiframe\" src=\"/ss/Cropper/dialog.jsp\"></iframe>"
  665. )
  666. cropiframe.on("load", function() {
  667. wdCropper.topWin = this.contentWindow;
  668. var uploadedImageURL = URL.createObjectURL(file);
  669. var img = new Image();
  670. img.onload = function() {
  671. wdCropper.layer.show({
  672. width: img.width,
  673. height: img.height
  674. });
  675. wdCropper.cropper.init();
  676. wdCropper.cropper.replace(uploadedImageURL);
  677. }
  678. img.src = uploadedImageURL;
  679. }).appendTo(wd.topWindow.$("body")).show();
  680. }
  681. function uploadFileClean(id) {
  682. $('#' + id + 'Name').html('');
  683. $('input[name="' + id + 'wj"]').val('');
  684. $('#' + id + 'Edit_File').val('');
  685. $('#' + id + 'Edit_File').files = null;
  686. $('#' + id + 'path').val('');
  687. $("#qx" + id).hide();
  688. $("#check" + id).hide();
  689. };