fileUpload.js 59 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692
  1. /**
  2. * 文件创建对象
  3. * @param containerId 文件容器ID
  4. */
  5. let WpFileUpload = function (containerId) {
  6. // 验证参数是否有
  7. if(WpParamTools.isNullOrEmpty(containerId)){
  8. // 容器Id不存在
  9. WpFileUploadMessage.error(WpFileUploadMessageModel.notExitUploadId);
  10. return;
  11. }
  12. // 文件操作对象,添加默认配置
  13. let wfu = {
  14. "uploadId":containerId,
  15. // 必须,上传地址
  16. "uploadUrl":"#",
  17. // 可选,获取进去信息的url
  18. "progressUrl":"#",
  19. // 模拟进度上传
  20. "scheduleStandard":false,
  21. // 自定义文件上传按钮id
  22. "selfUploadBtId":"",
  23. // 记住上传文件文件
  24. "rememberUpload":false,
  25. // 是否自动上传
  26. "autoCommit":false,
  27. // 是否隐藏上传按钮
  28. "isHiddenUploadBt":false,
  29. // 是否隐藏清除按钮
  30. "isHiddenCleanBt":false,
  31. // 是否上传完成后自动清除
  32. "isAutoClean":false,
  33. // 是否可以拖动
  34. "canDrag":true,
  35. // 文件类型
  36. "fileType":"*",
  37. // 文件大小限制,单位KB
  38. "size":"-1",
  39. // 文件总大小限制,单位KB
  40. "totalSize":"-1",
  41. // 文件数量限制
  42. "maxFileNumber":"-1",
  43. // 是否选择多文件
  44. "ismultiple":true,
  45. // 显示总进度条
  46. "showSummerProgress":true,
  47. // 是否显示文件单个总进度
  48. "showFileItemProgress":true,
  49. // 是否显示进度值
  50. "showProgressNum":false,
  51. // 要上传的文件参数
  52. "uploadFileParam":"files",
  53. // 要上传的文件参数是否迭代,如果true:files0,files1,files2......
  54. // 如果是false:所有的文件通过一个参数files来上传文件
  55. "uploadFileParamIteration":false,
  56. // 上传成功后返回的数据存储在此
  57. "resultData":null,
  58. "beforeUpload":function(){// 在上传前面执行的回调函数
  59. },
  60. "onUpload":function(){// 在上传之后
  61. }
  62. };
  63. // 设置初始化函数
  64. wfu.initUpload = WpFileUploadEvent.initUpload;
  65. // 设置回显文件事件
  66. wfu.showFileResult = WpFileUploadEvent.showFileResult;
  67. // 删除回显的单个文件
  68. wfu.removeShowFileItem = WpFileUploadEvent.removeShowFileItem;
  69. // 获取表单数据
  70. wfu.getFormData = WpFileUploadFormTools.getFormData;
  71. // 获取上传文件格式的表单数据
  72. wfu.getFormDataOfUploadFile = WpFileUploadFormTools.getFormDataOfUploadFile;
  73. // 上传失败调用
  74. wfu.uploadError = WpFileUploadTools.uploadError;
  75. // 上传成功调用
  76. wfu.uploadSuccess = WpFileUploadTools.uploadSuccess;
  77. // 上传文件
  78. wfu.upload = WpFileUploadTools.uploadFileOfWfuEvent;
  79. return wfu;
  80. };
  81. /**
  82. * 文件上传参数工具
  83. */
  84. let WpParamTools = {
  85. /**
  86. * 是否为空或者为null
  87. * @param param 要验证的参数
  88. * @return {boolean} 返回:true:参数为空或者null,false:参数不为空或者null
  89. */
  90. "isNullOrEmpty" : function (param) {
  91. return null == param || $.trim(param) === "";
  92. },
  93. /**
  94. * 数组参数是否为空或者为null
  95. * @param arrayObj 要验证的数组对象
  96. * @return {boolean} 返回true:为空或者为null,false:存在且数组不为空
  97. */
  98. "isNullOrEmptyOfArray" : function(arrayObj){
  99. return null == arrayObj || arrayObj.length <= 0;
  100. },
  101. /**
  102. * 验证参数是否只是一个对象,数组除外
  103. * @param param 要验证的参数
  104. * @returns {boolean} 返回true:是个对象,false:是个字符串,数组或者其它类型数据
  105. */
  106. "isOnlyObject" : function(param){
  107. return param.constructor === Object;
  108. }
  109. };
  110. /**
  111. * 文件上传事件调用工具
  112. */
  113. let WpFileUploadEvent = {
  114. /**
  115. * 初始化上传:
  116. * 初始化界面
  117. * 初始化按钮事件
  118. *
  119. * @param opt 要设置的参数,更改默认参数设置
  120. */
  121. "initUpload" : function(opt){
  122. // 获取对象,作为全局变量,方便修改
  123. let wfu = this;
  124. // 设置自定义配置
  125. if(null != opt){
  126. if (!WpParamTools.isOnlyObject(opt)) {
  127. // 初始化配置格式错误
  128. WpFileUploadMessage.error(WpFileUploadMessageModel.initConfigFormatError);
  129. return;
  130. }
  131. // 遍历默认参数,设置自定义参数配置
  132. $.each(wfu, function (key) {
  133. if (!WpParamTools.isNullOrEmpty(opt[key])) {
  134. wfu[key] = opt[key];
  135. }
  136. });
  137. }
  138. // 初始化布局
  139. WpFileUploadEvent.initWithLayout(wfu);
  140. // 初始化拖拽
  141. WpFileUploadEvent.initWithDrag(wfu);
  142. // 初始化选择文件
  143. WpFileUploadEvent.initWithSelectFile(wfu);
  144. // 初始化清除文件
  145. WpFileUploadEvent.initWithCleanFile(wfu);
  146. // 初始化文件上传
  147. WpFileUploadEvent.initWithUpload(wfu);
  148. // 初始化对象文件
  149. WpFileUploadFileList.initFileList(wfu);
  150. },
  151. /**
  152. * 初始化布局
  153. * @param wfu 要初始化的对象
  154. */
  155. "initWithLayout" : function(wfu){
  156. let uploadId = wfu.uploadId;
  157. let fileContanObj = $("#"+uploadId);
  158. // 添加上传头部按钮集合
  159. fileContanObj.append(WpFileUploadViewsModel.getHeadButtonsView(wfu));
  160. // 添加总进度条
  161. fileContanObj.append(WpFileUploadViewsModel.getSummerProgress(wfu));
  162. // 添加文件上传的显示容器
  163. fileContanObj.append(WpFileUploadViewsModel.getFileContainBox());
  164. },
  165. /**
  166. * 初始化拖拽
  167. * @param wfu 初始化操作的对象
  168. */
  169. "initWithDrag" : function(wfu){
  170. let canDrag = wfu.canDrag;
  171. let uploadId = wfu.uploadId;
  172. // 文件上传容器
  173. let containObj = $("#"+uploadId);
  174. // 文件存放的容器
  175. let containBoxObj = containObj.find(".boximgs").get(0);
  176. if(canDrag){
  177. $(document).on({
  178. dragleave:function(e){// 拖离 
  179. e.preventDefault();
  180. },
  181. drop:function(e){// 拖后放 
  182. e.preventDefault();
  183. },
  184. dragenter:function(e){// 拖进 
  185. e.preventDefault();
  186. },
  187. dragover:function(e){// 拖来拖去 
  188. e.preventDefault();
  189. }
  190. });
  191. if(containBoxObj != null){
  192. // 验证图片格式,大小,是否存在
  193. containBoxObj.addEventListener("drop",function(e) {
  194. if(containObj.attr("isUpload") === "true"){
  195. e.preventDefault();
  196. }else{
  197. WpFileUploadEvent.dragListingEvent(e,wfu);
  198. }
  199. });
  200. }
  201. }
  202. },
  203. /**
  204. * 初始化选择文件按钮
  205. * @param wfu 初始化操作的对象
  206. */
  207. "initWithSelectFile" : function(wfu){
  208. let uploadId = wfu.uploadId;
  209. let selectFileBtObj = $("#"+uploadId+" .uploadBts .selectFileBt");
  210. selectFileBtObj.css("background-color","#0099FF");
  211. selectFileBtObj.off();
  212. selectFileBtObj.on("click",function(){
  213. if(wfu.autoCommit){
  214. WpFileUploadEvent.cleanFileEvent(wfu);
  215. }
  216. WpFileUploadEvent.selectFileEvent(wfu);
  217. });
  218. },
  219. /**
  220. * 初始化清除文件
  221. * @param wfu 初始化操作的对象
  222. */
  223. "initWithCleanFile" : function (wfu) {
  224. let uploadId = wfu.uploadId;
  225. if(!wfu.isHiddenCleanBt){
  226. let cleanBtObj = $("#"+uploadId+" .uploadBts .cleanFileBt");
  227. let cleanBtObjIcon = $("#"+uploadId+" .uploadBts .cleanFileBt i");
  228. cleanBtObj.off();
  229. cleanBtObj.on("click",function(){
  230. WpFileUploadEvent.cleanFileEvent(wfu);
  231. });
  232. cleanBtObjIcon.css("color","#0099FF");
  233. }
  234. },
  235. /**
  236. * 选择文件事件
  237. * @param wfu 初始化操作的对象
  238. */
  239. "selectFileEvent" : function(wfu){
  240. let uploadId = wfu.uploadId;
  241. let ismultiple = wfu.ismultiple;
  242. let inputObj=document.createElement('input');
  243. inputObj.setAttribute('id',uploadId+'_file');
  244. inputObj.setAttribute('type','file');
  245. inputObj.setAttribute("style",'visibility:hidden');
  246. if(ismultiple){// 是否选择多文件
  247. inputObj.setAttribute("multiple","multiple");
  248. }
  249. $(inputObj).on("change", function(){
  250. WpFileUploadEvent.selectFileChangeEvent(this.files, wfu);
  251. });
  252. document.body.appendChild(inputObj);
  253. inputObj.click();
  254. },
  255. /**
  256. * 选择文件,改变文件的事件
  257. * @param files 选择的文件
  258. * @param wfu 初始化操作的对象
  259. */
  260. "selectFileChangeEvent" : function (files, wfu) {
  261. // 添加文件到列表
  262. WpFileUploadTools.addFileList(files, wfu);
  263. // 清除input选择文件
  264. WpFileUploadTools.cleanFilInputWithSelectFile(wfu);
  265. // 如果是开启自动提交,则启动提交
  266. if(wfu.autoCommit){
  267. WpFileUploadTools.uploadFileEvent(wfu);
  268. }
  269. },
  270. /**
  271. * 清除文件事件
  272. * @param wfu 操作的对象
  273. */
  274. "cleanFileEvent" : function(wfu){
  275. let uploadId = wfu.uploadId;
  276. if(wfu.showSummerProgress){
  277. // 设置进度条关闭
  278. WpFileUploadTools.setProgressShow(uploadId, false);
  279. // 设置进度条长度
  280. WpFileUploadTools.setProgressNumber(wfu, 0);
  281. }
  282. // 清楚input文件选择
  283. WpFileUploadTools.cleanFilInputWithSelectFile(wfu);
  284. // 设置文件为空
  285. WpFileUploadFileList.setFileList([],wfu);
  286. // 删除要上传的文件,但是注意,不会上传已经上传了的文件
  287. WpFileItemTools.getNeedUploadItemArray(uploadId).remove();
  288. WpFileUploadTools.changeUploadButtonsStatus(wfu,2);
  289. },
  290. /**
  291. * 拖动监听事件
  292. * @param wfu 操作的对象
  293. */
  294. "dragListingEvent" : function(wfu){
  295. },
  296. /**
  297. * 初始化文件上传
  298. * @param wfu 操作的对象
  299. */
  300. "initWithUpload" : function(wfu){
  301. let uploadId = wfu.uploadId;
  302. if(!wfu.isHiddenUploadBt){
  303. // 上传文件按钮
  304. let uploadFileBt = $("#"+uploadId+" .uploadBts .uploadFileBt");
  305. uploadFileBt.off();
  306. uploadFileBt.on("click",function(){
  307. WpFileUploadTools.uploadFileEvent(wfu);
  308. });
  309. // 上传按钮图标
  310. let uploadFileBtIcon = $("#"+uploadId+" .uploadBts .uploadFileBt i");
  311. uploadFileBtIcon.css("color","#0099FF");
  312. }
  313. if(wfu.selfUploadBtId != null && wfu.selfUploadBtId !== ""){
  314. if(WpFileUploadTools.foundExitById(wfu.selfUploadBtId)){
  315. // 自定义上传按钮
  316. let selfUploadBt = $("#"+wfu.selfUploadBtId);
  317. selfUploadBt.off();
  318. selfUploadBt.on("click",function(){
  319. WpFileUploadTools.uploadFileEvent(wfu);
  320. });
  321. }
  322. }
  323. },
  324. /**
  325. * 增加开始上传文件标识
  326. * @param wfu 要操作的对象
  327. */
  328. "startUpload":function(wfu){
  329. let uploadId = wfu.uploadId;
  330. $("#"+uploadId).attr("isUpload","true")
  331. },
  332. /**
  333. * 去除开始上传文件标识
  334. * @param wfu 要操作的对象
  335. */
  336. "stopUpload":function(wfu){
  337. let uploadId = wfu.uploadId;
  338. $("#"+uploadId).removeAttr("isUpload");
  339. },
  340. /**
  341. * 删除文件
  342. * @param wfu 操作的对象
  343. */
  344. "initWithDeleteFile" : function (wfu) {
  345. let uploadId = wfu.uploadId;
  346. let fileItemViewArray = WpFileItemTools.getNeedUploadItemArray(uploadId)
  347. let fileItemDeleteBt = WpFileItemTools.getFileViewStatus(fileItemViewArray);
  348. fileItemDeleteBt.off();
  349. fileItemDeleteBt.on("click",function(){
  350. WpFileUploadEvent.deleteFileEvent(wfu, this);
  351. })
  352. },
  353. /**
  354. * 删除文件时间
  355. * @param wfu 操作的对象
  356. * @param obj 操作的文件对象
  357. */
  358. "deleteFileEvent" : function (wfu, obj){
  359. let fileItem = $(obj).parent().parent();
  360. let fileCodeId = fileItem.attr("fileCodeId");
  361. let fileListArray = WpFileUploadFileList.getFileList(wfu);
  362. delete fileListArray[fileCodeId];
  363. WpFileUploadFileList.setFileList(fileListArray,wfu);
  364. fileItem.remove();
  365. },
  366. /**
  367. * 回显文件
  368. * @param fileUrl 文件地址,必须,文件的路径地址
  369. * @param fileId 文件操作的id,
  370. * @param deleteFile 是否删除文件
  371. * @param defineFileName 是否下载文件
  372. * @param deleteEvent 删除文件执行的事件
  373. * @param defineFileName 自定义文件名,如果不填写或者为null将从链接中获取文件名
  374. * @param downLoadEvent 下载触发事件
  375. */
  376. "showFileResult" : function(fileUrl,fileId,defineFileName,deleteFile,downloadFile,deleteEvent,downLoadEvent){
  377. // 获取对象,作为全局变量,方便修改
  378. let wfu = this;
  379. // 上传的Id
  380. let uploadId = wfu.uploadId;
  381. if (null == fileUrl || fileUrl == "" || uploadId == null || uploadId == "" ) {
  382. return;
  383. }
  384. let boxJsObj = $("#"+uploadId+" .boximgs").get(0);
  385. // 设置文件名
  386. let fileName = defineFileName;
  387. // 根据文件地址获取文件名称
  388. if(WpParamTools.isNullOrEmpty(defineFileName)){
  389. fileName = WpFileUploadTools.getFileNameWithUrl(fileUrl);
  390. }
  391. // 文件类型
  392. let fileType = WpFileUploadTools.getSuffixNameByFileName(fileName)
  393. // 是否是图片
  394. let isImg = WpFileUploadTools.isInArray(fileType, WpFileUploadTools.imgArray);
  395. // 文件类型大写
  396. fileType = fileType.toUpperCase();
  397. // 获取回显文件模版
  398. let modelStr = WpFileUploadViewsModel.getFileItemResultModel(fileType, fileId, fileName, isImg, fileUrl, deleteFile, downloadFile);
  399. $(boxJsObj).append(modelStr);
  400. // 如果删除文件,则添加删除文件的事件
  401. if(deleteFile) {
  402. let fileItem = WpFileItemTools.getIsUploadItem(uploadId, fileId);
  403. WpFileItemTools.getFileViewRemove(fileItem).mousedown(function () {
  404. if(deleteEvent != null && deleteEvent != "" && (typeof deleteEvent === "function") ) {
  405. deleteEvent(fileId);
  406. }
  407. });
  408. }
  409. // 执行下载函数
  410. if(downloadFile) {
  411. let fileItem = WpFileItemTools.getIsUploadItem(uploadId, fileId);
  412. WpFileItemTools.getFileViewDown(fileItem).mousedown(function () {
  413. if(deleteEvent != null && deleteEvent != "" && (typeof deleteEvent === "function") ) {
  414. downLoadEvent(fileId,fileUrl);
  415. }
  416. });
  417. }
  418. },
  419. /**
  420. * 删除回显成功的单个文件
  421. * @param fileId 文件ID
  422. */
  423. "removeShowFileItem" : function (fileId) {
  424. // 获取对象,作为全局变量,方便修改
  425. let wfu = this;
  426. // 上传的Id
  427. let uploadId = wfu.uploadId;
  428. let fileitemObj = WpFileItemTools.getIsUploadItem(uploadId, fileId);
  429. fileitemObj.remove();
  430. }
  431. };
  432. /**
  433. * 文件上传视图模板
  434. */
  435. let WpFileUploadViewsModel = {
  436. /**
  437. * 头部按钮操作视图模板
  438. * @param wfu 操作的对象
  439. * @return {string} 头部按钮操作模板
  440. */
  441. //<div class="woverflow wpsr layui_qr_upload mdr05 href wleft ">
  442. // <img class="wleft mdt02" src="img/upload.png"/>
  443. // <p class="wleft font14 layui_color_ls">上传</p>
  444. //</div>
  445. "getHeadButtonsView" : function(wfu){
  446. // 选择文件的按钮标题
  447. let selectFileButtonTitle = '上传';
  448. let btsStr = '';
  449. btsStr += '<p class="ds wleft">网站修改:</p><div class="uploadBts href mdr05 wleft">';
  450. btsStr += '<div class="woverflow wpsr selectFileBt bg0 layui_qr_upload">';
  451. btsStr += '<img class="wleft mdt02" src="img/upload.png"/>';
  452. btsStr += '<p class="wleft font14 layui_color_ls">'+selectFileButtonTitle+'</p>';
  453. btsStr += '</div>';
  454. // 上传按钮
  455. // if(!wfu.isHiddenUploadBt){
  456. // btsStr += '<div class="uploadFileBt">';
  457. // btsStr += '<i class="iconfont icon-shangchuan"></i>';
  458. // btsStr += '</div>';
  459. // }
  460. // 清理按钮
  461. // if(!wfu.isHiddenCleanBt){
  462. // btsStr += '<div class="cleanFileBt">';
  463. // btsStr += '<i class="iconfont icon-qingchu"></i>';
  464. // btsStr += '</div>';
  465. // }
  466. btsStr += '</div><p class="wleft">上传网站修改文档<span class="huangse">word、PDF</span>(文件大小20M以内)</p>';
  467. return btsStr;
  468. },
  469. /**
  470. * 获取文件总进度条
  471. * @param wfu 操作对象
  472. * @return {string} 总进度模板
  473. */
  474. "getSummerProgress" : function(wfu){
  475. let summerProgressStr = '';
  476. let progressNum = '';
  477. if(wfu.showProgressNum){
  478. progressNum = '0%';
  479. }
  480. // 添加总进度条
  481. // if(wfu.showSummerProgress){
  482. // summerProgressStr += '<div class="subberProgress">';
  483. // summerProgressStr += '<div class="progress">';
  484. // summerProgressStr += '<div>'+progressNum+'</div>';
  485. // summerProgressStr += '</div>';
  486. // summerProgressStr += '</div>';
  487. // }
  488. return summerProgressStr;
  489. },
  490. /**
  491. * 获取文件存放的容器
  492. * @return {string} 存放文件的容器模板
  493. */
  494. "getFileContainBox" : function(){
  495. return '<div class="clear"></div><div class="boximgs"></div>';
  496. },
  497. /**
  498. * 上传显示文件的模板
  499. * @param isImg 是否式图片:true/false
  500. * @param fileType 文件类型
  501. * @param fileName 文件名字
  502. * @param isImgUrl 如果事文件时的文件地址默认为null
  503. * @param fileCodeId 文件表使
  504. */
  505. "getFileItemModel":function(isImg,fileType,fileName,isImgUrl,fileCodeId){
  506. // 默认显示类型
  507. let showTypeStr='<div class="fileType">'+fileType+'</div> <i class="iconfont icon-wenjian"></i>';
  508. if(isImg){
  509. // 图片显示类型
  510. if(isImgUrl != null && isImgUrl !== "null" && isImgUrl !== ""){
  511. showTypeStr = '<img src="'+isImgUrl+'" alt="'+fileName+'"/>';
  512. }
  513. }
  514. let modelStr="";
  515. modelStr += '<div class="fileItem" fileCodeId="'+fileCodeId+'">';
  516. modelStr += '<div class="imgShow">';
  517. modelStr += showTypeStr;
  518. modelStr += '</div>';
  519. modelStr += '<div class="progress">';
  520. modelStr += '<div class="progress_inner"></div>';
  521. modelStr += '</div>';
  522. modelStr += '<div class="status">';
  523. modelStr += '<i class="iconfont href icon-shanchu"></i>';
  524. modelStr += '</div>';
  525. modelStr += '<div class="fileName textlh1">';
  526. modelStr += fileName;
  527. modelStr += '</div>';
  528. modelStr += '</div>';
  529. return modelStr;
  530. },
  531. /**
  532. * 回显文件模版
  533. * @param fileType 文件类型
  534. * @param fileId 文件ID
  535. * @param fileName 文件名字
  536. * @param isImg 是否是图片
  537. * @param fileUrl 文件URL
  538. * @param deleteFile 是否删除文件,true:删除文件,false:不能删除文件
  539. * @returns {string} 返回回显文件的模版
  540. */
  541. "getFileItemResultModel" : function (fileType, fileId, fileName, isImg, fileUrl, deleteFile, downloadFile) {
  542. //默认显示类型
  543. let showTypeStr = '<div class="fileType">'+fileType+'</div> <i class="iconfont icon-wenjian"></i>';
  544. //是否是文件
  545. if (isImg) {
  546. //图片显示类型
  547. if (fileUrl != null && fileUrl != "null" && fileUrl != "") {
  548. showTypeStr = '<img src="'+fileUrl+'"/>';
  549. }
  550. }
  551. let showImgStyle = 'imgShow';
  552. if (!deleteFile) {
  553. showImgStyle+=" imgShowResult";
  554. }
  555. let modelStr = '';
  556. modelStr += '<div class="fileItem" showFileCode="'+fileId+'">';
  557. modelStr += '<div class="'+showImgStyle+'">';
  558. modelStr += showTypeStr;
  559. modelStr += '</div>';
  560. if (downloadFile) {
  561. modelStr += '<div class="down">';
  562. modelStr += '<i class="iconfont icon-xiazai"></i>';
  563. modelStr += '</div>';
  564. }
  565. if (deleteFile) {
  566. modelStr += '<div class="status">';
  567. modelStr += '<i class="iconfont icon-shanchu"></i>';
  568. modelStr += '</div>';
  569. }
  570. modelStr += '<div class="fileName">';
  571. modelStr += fileName;
  572. modelStr += '</div>';
  573. modelStr += '</div>';
  574. return modelStr;
  575. }
  576. };
  577. /**
  578. * 文件上传Ajax操作
  579. */
  580. let WpFileUploadAjax = {
  581. /**
  582. * 开始上传文件
  583. * @param wfu 调用的对象
  584. * @param formData 封装的参数
  585. * @param rememberFile 记住已上传文件的对象
  586. */
  587. "startUploadFile" : function (wfu,formData,rememberFile) {
  588. $.ajax({
  589. type:"post",
  590. url:wfu.uploadUrl,
  591. data:formData,
  592. processData : false,
  593. contentType : false,
  594. success:function(data){
  595. // 更新记住我的缓存
  596. WpFileUploadFileList.flushRememberFile(rememberFile,wfu);
  597. // 记录上传成功后的结果
  598. wfu.resultData = data;
  599. // 调用上传结束后的事件
  600. setTimeout(function () { wfu.onUpload() },500);
  601. // 自定清除文件
  602. if (wfu.isAutoClean){
  603. setTimeout(function () {WpFileUploadEvent.cleanFileEvent(wfu);},2000) ;
  604. }
  605. },
  606. error:function(e){
  607. // 显示上传错误
  608. wfu.uploadError();
  609. }
  610. });
  611. }
  612. };
  613. /**
  614. * 文件列表操作
  615. * @type {{}}
  616. */
  617. let WpFileUploadFileList = {
  618. /**
  619. * 初始化文件
  620. * @param wfu 要操作的对象
  621. */
  622. "initFileList":function(wfu){
  623. wfu.fileList = new Array();
  624. },
  625. /**
  626. * 获取文件列表
  627. * @param wfu 要操作的对象
  628. * @return {Array} 返回文件列表
  629. */
  630. "getFileList":function(wfu){
  631. // 如果未进行初始化则进行初始化
  632. if (null == wfu.fileList){
  633. WpFileUploadFileList.initFileList(wfu);
  634. }
  635. return wfu.fileList;
  636. },
  637. /**
  638. * 设置文件列表
  639. * @param fileList 文件列表
  640. * @param wfu
  641. */
  642. "setFileList":function(fileList,wfu){
  643. wfu.fileList = fileList;
  644. },
  645. /**
  646. * 更新记住文件
  647. * @param fileList 要更新的文件列表
  648. * @param wfu 要操作的对象
  649. */
  650. "flushRememberFile":function(fileList,wfu){
  651. if(wfu.rememberUpload){
  652. // 记住文件是否为空
  653. let rememberFileIsEmpty = wfu.rememberFile == null || wfu.rememberFile === "" || wfu.rememberFile.length === 0;
  654. if(rememberFileIsEmpty){
  655. wfu.rememberFile = wfu.fileList;
  656. }else{
  657. let rememberFileArray = wfu.rememberFile;
  658. for(let i=0;i<fileList.length;i++){
  659. rememberFileArray[rememberFileArray.length] = fileList[i];
  660. }
  661. wfu.rememberFile = rememberFileArray;
  662. }
  663. }
  664. },
  665. /**
  666. * 获取文件上传总数据量
  667. * @param wfu 操作的对象
  668. * @returns {number} 返回文件上传总大小
  669. */
  670. "getFilesDataAmount":function(wfu){
  671. let fileList = WpFileUploadFileList.getFileList(wfu);
  672. let summer = 0;
  673. for (let i = 0; i < fileList.length; i++) {
  674. let fileItem = fileList[i];
  675. if (fileItem != null){
  676. summer = parseFloat(summer)+fileItem.size;
  677. }
  678. }
  679. return summer;
  680. },
  681. /**
  682. * 获取文件个数
  683. * @param wfu 操作的对象
  684. */
  685. "getFileNumber":function(wfu){
  686. let number = 0;
  687. let fileList = WpFileUploadFileList.getFileList(wfu);
  688. for(let i = 0; i < fileList.length; i++){
  689. if(fileList[i] != null){
  690. number++;
  691. }
  692. }
  693. return number;
  694. },
  695. /**
  696. * 文件是否已经存在
  697. * @param file 要验证的文件
  698. * @param wfu 操作的对象
  699. * @returns {boolean} true:文件已经在上传的列表中了,false:文件不存在上传列表中
  700. * */
  701. "fileIsExit":function(file,wfu){
  702. let fileList = WpFileUploadFileList.getFileList(wfu);
  703. let ishave = false;
  704. for(let i = 0; i < fileList.length; i++){
  705. let fileItem = fileList[i];
  706. // 文件名相同,文件大小相同
  707. if(null != fileItem && fileItem.name === file.name && fileItem.size === file.size){
  708. ishave = true;
  709. }
  710. }
  711. return ishave;
  712. },
  713. /**
  714. * 文件是否已经被上传
  715. * @param file 要验证的文件
  716. * @param wfu 操作的对象
  717. * @returns {boolean} true:文件已经上传过了,false:文件没有上传过
  718. */
  719. "fileIsHaveUpload":function(file,wfu){
  720. let fileList = wfu.rememberFile;
  721. let ishave = false;
  722. if(fileList!=null){
  723. for(let i = 0; i < fileList.length; i++){
  724. let fileItem = fileList[i];
  725. // 文件名相同,文件大小相同
  726. if(null != fileItem && fileItem.name === file.name && fileItem.size === file.size){
  727. ishave = true;
  728. }
  729. }
  730. }
  731. return ishave;
  732. },
  733. /**
  734. * 获取文件总大小
  735. * @param wfu 操作的对象
  736. */
  737. "getFileTotalSize" : function (wfu) {
  738. let fileList = WpFileUploadFileList.getFileList(wfu);
  739. let totalSize = 0;
  740. for(let i = 0; i < fileList.length; i++){
  741. let fileItem = fileList[i];
  742. if (null != fileItem) {
  743. totalSize += parseInt(fileItem.size);
  744. }
  745. }
  746. return totalSize;
  747. },
  748. };
  749. /**
  750. * 文件上传其它工具
  751. */
  752. let WpFileUploadTools = {
  753. "imgArray" : ['jpg','png','jpeg','bmp','gif','webp'],
  754. /**
  755. * 设置进度条的显示
  756. * @param uploadId 文件上传容器Id
  757. * @param isShow 是否显示
  758. */
  759. "setProgressShow":function(uploadId, isShow){
  760. let subberProgressParent = $("#"+uploadId+" .subberProgress");
  761. let display = isShow ? "block" : "none";
  762. subberProgressParent.css("display", display);
  763. },
  764. /**
  765. * 设置进度条的数值
  766. * @param wfu 操作的对象
  767. * @param percentNum 进度百分比,如:60% 这里填写的值为60
  768. */
  769. "setProgressNumber":function(wfu, percentNum){
  770. let uploadId = wfu.uploadId;
  771. let subberProgress = $("#"+uploadId+" .subberProgress .progress>div");
  772. // 格式化数据
  773. percentNum = percentNum+"%";
  774. // 设置长度
  775. subberProgress.css("width",percentNum);
  776. // 是否显示值
  777. if(wfu.showProgressNum){
  778. subberProgress.html(percentNum);
  779. }
  780. },
  781. /**
  782. * 添加文件到box文件列表
  783. * @param fileList 选择的文件列表
  784. * @param wfu 要操作的对象
  785. */
  786. "addFileList" : function (fileList, wfu) {
  787. let uploadId = wfu.uploadId;
  788. let boxJsObj = $("#"+uploadId+" .boximgs").get(0);
  789. // 获取文件队列
  790. let fileListArray=WpFileUploadFileList.getFileList(wfu);
  791. // 获取文件数量,不能直接fileListArray获取length,因为里面包含了null
  792. let fileNumber = WpFileUploadFileList.getFileNumber(wfu);
  793. // 是否超出文件数量限制
  794. let isOutOfFileNumber = wfu.maxFileNumber !== "-1" && ((parseInt(fileNumber) + fileList.length) > parseInt(wfu.maxFileNumber));
  795. if(isOutOfFileNumber){
  796. WpFileUploadMessage.error(WpFileUploadMessageModel.outMaxFileNumber(wfu.maxFileNumber));
  797. return;
  798. }
  799. // 图片文件测试
  800. let imgtest=/image\/(\w)*/;
  801. // 文件类型集合
  802. let fileTypeArray = wfu.fileType;
  803. // 文件大小限制
  804. let fileSizeLimit = wfu.size;
  805. // 文件总大小限制
  806. let fileTotalSizeLimit = wfu.totalSize;
  807. for(let i = 0; i < fileList.length; i++){
  808. let fileItem = fileList[i];
  809. // 判断文件是否存在
  810. if(WpFileUploadFileList.fileIsExit(fileItem, wfu)){
  811. // 文件已经存在
  812. WpFileUploadMessage.error(WpFileUploadMessageModel.fileIsExit(fileItem.name));
  813. continue;
  814. }
  815. // 是否记住上传文件
  816. if(wfu.rememberUpload){
  817. if(WpFileUploadFileList.fileIsHaveUpload(fileItem,wfu)){
  818. WpFileUploadMessage.error(WpFileUploadMessageModel.fileIsHaveUpload(fileItem.name));
  819. continue;
  820. }
  821. }
  822. // 文件总大小判断
  823. let isOutOfTotalSize = fileTotalSizeLimit !== '-1' && (WpFileUploadFileList.getFileTotalSize(wfu) + fileItem.size > (fileTotalSizeLimit*1000));
  824. if (isOutOfTotalSize){
  825. WpFileUploadMessage.error(WpFileUploadMessageModel.outOfTotalSize(fileTotalSizeLimit));
  826. continue;
  827. }
  828. // 单个文件大小显示判断
  829. let isOutOfSize = fileSizeLimit !== '-1' && fileItem.size > (fileSizeLimit*1000);
  830. if(isOutOfSize){
  831. WpFileUploadMessage.error(WpFileUploadMessageModel.outOfSize(fileItem.name,fileSizeLimit));
  832. continue;
  833. }
  834. // 获取文件后缀
  835. let fileTypeStr = WpFileUploadTools.getSuffixNameByFileName(fileItem.name);
  836. // 文件是否在限定类型内
  837. let fileIsInType = fileTypeArray === "*" || WpFileUploadTools.isInArray(fileTypeStr, fileTypeArray);
  838. if (fileIsInType) {
  839. // 文件名大写
  840. let fileTypeUpcaseStr = fileTypeStr.toUpperCase();
  841. let fileModel = "";
  842. if (imgtest.test(fileItem.type)) {
  843. // 获取图片文件路径
  844. let imgUrlStr = WpFileUploadTools.getImgUrlOfLocal(fileItem);
  845. fileModel = WpFileUploadViewsModel.getFileItemModel(true,fileTypeUpcaseStr,fileItem.name,imgUrlStr,fileListArray.length);
  846. }else{
  847. fileModel = WpFileUploadViewsModel.getFileItemModel(false,fileTypeUpcaseStr,fileItem.name,null,fileListArray.length);
  848. }
  849. $(boxJsObj).append(fileModel);
  850. // 初始化单文件操作
  851. WpFileUploadEvent.initWithDeleteFile(wfu);
  852. fileListArray[fileListArray.length] = fileList[i];
  853. }else{
  854. WpFileUploadMessage.error(WpFileUploadMessageModel.notSupperFileType(fileItem.name));
  855. }
  856. }
  857. // 设置文件
  858. WpFileUploadFileList.setFileList(fileListArray,wfu);
  859. },
  860. /**
  861. * 清楚input选择文件
  862. * @param wfu 操作的对象
  863. */
  864. "cleanFilInputWithSelectFile" : function(wfu){
  865. let uploadId = wfu.uploadId;
  866. $("#"+uploadId+"_file").remove();
  867. },
  868. /**
  869. * 上传文件
  870. * @param wfu 操作的对象
  871. */
  872. "uploadFileEvent" : function(wfu){
  873. if(null != wfu.beforeUpload && (typeof wfu.beforeUpload === "function")) {
  874. wfu.beforeUpload();
  875. }
  876. WpFileUploadTools.uploadFile(wfu);
  877. },
  878. /**
  879. * wfu调用的上传事件
  880. */
  881. "uploadFileOfWfuEvent" : function () {
  882. let wfu = this;
  883. WpFileUploadTools.uploadFileEvent(wfu);
  884. },
  885. /**
  886. * 查找某个对象是否存在
  887. * @param id 要查找的Id
  888. * @returns {boolean} true:存在,false:不存在
  889. */
  890. "foundExitById":function(id){
  891. return $("#"+id).size() > 0;
  892. },
  893. /**
  894. * 获取文件名后缀
  895. * @param fileName 文件名全名
  896. * */
  897. "getSuffixNameByFileName":function(fileName){
  898. let str = fileName;
  899. let index = str.lastIndexOf(".");
  900. if (index < 0) {
  901. return "未知";
  902. }
  903. let pos = index+1;
  904. return str.substring(pos,str.length);
  905. },
  906. /**
  907. * 判断某个值是否在这个数组内
  908. * */
  909. "isInArray":function(strFound,arrays){
  910. let ishave = false;
  911. for (let i = 0; i < arrays.length; i++) {
  912. if(strFound === arrays[i] || strFound.toLowerCase() === arrays[i]){
  913. ishave = true;
  914. break;
  915. }
  916. }
  917. return ishave;
  918. },
  919. /**
  920. * 获取图片文件的本地路径
  921. * @param fileItem 文件对象
  922. */
  923. "getImgUrlOfLocal":function(fileItem){
  924. // 获取文件路径
  925. let imgUrlStr = "";
  926. if (window.createObjectURL !== undefined) { // basic
  927. imgUrlStr = window.createObjectURL(fileItem);
  928. } else if (window.URL !== undefined) { // mozilla(firefox)
  929. imgUrlStr = window.URL.createObjectURL(fileItem);
  930. } else if (window.webkitURL !== undefined) { // webkit or chrome
  931. imgUrlStr = window.webkitURL.createObjectURL(fileItem);
  932. }
  933. return imgUrlStr;
  934. },
  935. /**
  936. * 添加上传文件到formData,并且记录上传文件
  937. * @param wfu 操作的对象
  938. * @param formData 要被封装的对象
  939. * @param rememberFile 记住文件要设置的数组
  940. */
  941. "addUploadFileToFormData":function(wfu, formData, rememberFile){
  942. // 获取所有要上传的文件列表
  943. let fileList = WpFileUploadFileList.getFileList(wfu);
  944. // 参数迭代数字,file0,file1,file2.....
  945. let paramNum = 0;
  946. for (let i = 0; i < fileList.length; i++) {
  947. if (fileList[i] == null) {
  948. continue;
  949. }
  950. let fileItem = fileList[i];
  951. // 如果参数不是迭代
  952. if (!wfu.uploadFileParamIteration) {
  953. formData.append(wfu.uploadFileParam, fileItem);
  954. } else {
  955. formData.append(wfu.uploadFileParam + paramNum++, fileItem);
  956. }
  957. // 记住文件
  958. WpFileUploadTools.addUploadFileRemember(wfu, rememberFile, fileItem);
  959. }
  960. },
  961. /**
  962. * 添加上传文件要记住的文件
  963. * @param wfu 操作对象
  964. * @param rememberFiles 要操作记住文件的对象
  965. * @param fileItem 要被记录的文件
  966. */
  967. "addUploadFileRemember" : function (wfu, rememberFiles, fileItem) {
  968. if (wfu.rememberFile && null != rememberFiles && null != fileItem){
  969. rememberFiles[rememberFiles.length] = fileItem;
  970. }
  971. },
  972. /**
  973. * 添加上传文件其它参数
  974. * @param wfu 要操作的对象
  975. * @param formData 要被封装的对象
  976. */
  977. "addUploadParamToFormData" : function (wfu, formData) {
  978. if (null != wfu.otherData && wfu.otherData != "" ) {
  979. for (let j = 0; j < wfu.otherData.length; j++) {
  980. formData.append(wfu.otherData[j].name, wfu.otherData[j].value);
  981. }
  982. }
  983. },
  984. /**
  985. * 上传文件
  986. * @param wfu 要操作的对象
  987. */
  988. "uploadFile" : function (wfu) {
  989. WpFileUploadEvent.startUpload(wfu);
  990. let uploadUrl = wfu.uploadUrl;
  991. // 记住我文件数组
  992. let rememberFile = [];
  993. // 数据封装对象
  994. let formData = new FormData();
  995. let fileNumber = WpFileUploadFileList.getFileNumber(wfu);
  996. if (fileNumber <= 0){
  997. // 没有要上传的文件
  998. WpFileUploadMessage.info(WpFileUploadMessageModel.noFileUpload);
  999. return;
  1000. }
  1001. // 添加文件到formData
  1002. WpFileUploadTools.addUploadFileToFormData(wfu,formData,rememberFile);
  1003. // 添加上传的其他参数到formData
  1004. WpFileUploadTools.addUploadParamToFormData(wfu,formData);
  1005. if (uploadUrl !== "#" && uploadUrl != "") {
  1006. // 禁用影响上传的按钮
  1007. WpFileUploadTools.changeUploadButtonsStatus(wfu, 0);
  1008. // 开始上传文件
  1009. WpFileUploadAjax.startUploadFile(wfu,formData,rememberFile);
  1010. }else if (wfu.scheduleStandard) {
  1011. // 提示警告信息,并且开始模拟上传
  1012. WpFileUploadMessage.warn(WpFileUploadMessageModel.noUploadUrl);
  1013. // 禁用影响上传的按钮
  1014. WpFileUploadTools.changeUploadButtonsStatus(wfu, 0);
  1015. // 模拟上传成功
  1016. WpFileUploadFileList.flushRememberFile(rememberFile, wfu);
  1017. }
  1018. // 获取进度
  1019. WpFileUploadTools.getFileUploadProgressMsg(wfu);
  1020. },
  1021. /**
  1022. * 获取上传进度
  1023. * @param wfu
  1024. */
  1025. "getFileUploadProgressMsg" : function (wfu) {
  1026. let uploadId = wfu.uploadId;
  1027. let progressUrl = wfu.progressUrl;
  1028. if(wfu.showSummerProgress){
  1029. $("#"+uploadId+" .subberProgress").css("display","block");
  1030. } else if (!wfu.showFileItemProgress) {
  1031. //如果主进度条不显示,单文件进度不显示,则不进行模拟进度,模拟进度设置将无效
  1032. return;
  1033. }
  1034. let fileItemView = WpFileItemTools.getNeedUploadItemArray(uploadId);
  1035. WpFileItemTools.getFileViewStatus(fileItemView).removeClass();
  1036. // 开始真实获取进度信息
  1037. if (!wfu.scheduleStandard && progressUrl !== "#" && progressUrl != null && progressUrl !== "") {
  1038. // 获取进度为O的情况多余30次的时候,就显示错误
  1039. let getCount = 20;
  1040. // 设置定时器
  1041. let intervalId = setInterval(function(){
  1042. $.get(progressUrl,{},function(data,status){
  1043. let percent = data.percent;
  1044. let bytesRead = data.bytesRead;
  1045. let items = data.items;
  1046. if(percent >= 100){
  1047. clearInterval(intervalId);
  1048. percent = 100;// 不能大于100
  1049. WpFileUploadEvent.initWithCleanFile(wfu);
  1050. }
  1051. //设置限定次数
  1052. if (getCount <= 0) {
  1053. clearInterval(intervalId);
  1054. wfu.uploadError();
  1055. return;
  1056. } else {
  1057. if (bytesRead == 0) {
  1058. getCount--;
  1059. }
  1060. }
  1061. WpFileUploadTools.showUploadProgress(wfu, bytesRead, percent,items);
  1062. },"json");
  1063. },500);
  1064. } else {
  1065. // 进行模拟进度上传
  1066. // 获取文件上传总大小
  1067. let filesDataAmount = WpFileUploadFileList.getFilesDataAmount(wfu);
  1068. // 所占百分比
  1069. let percent = 0;
  1070. // 已度数据大小
  1071. let bytesRead = 0;
  1072. // 如果进行模拟进度上传
  1073. if (wfu.scheduleStandard) {
  1074. // 创建一个模拟上传速度,5秒能传完的速度,500微妙执行一次,也就是计算10次
  1075. let speedSchedule = WpFileUploadComputer.div(filesDataAmount , 10);
  1076. // 创建定时器,进行模拟进度演示
  1077. let intervalId = setInterval(function(){
  1078. bytesRead = WpFileUploadComputer.add(bytesRead,speedSchedule);
  1079. percent = WpFileUploadComputer.div(bytesRead , filesDataAmount) * 100;
  1080. //取两位小数
  1081. percent = percent.toFixed(2);
  1082. if(percent >= 100){
  1083. clearInterval(intervalId);
  1084. percent = 100;// 不能大于 100
  1085. WpFileUploadEvent.initWithCleanFile(wfu);
  1086. }
  1087. // 更新进度条
  1088. WpFileUploadTools.showUploadProgress(wfu, bytesRead, percent);
  1089. },500);
  1090. } else {
  1091. //一次进入60%,然后停止,直到完成
  1092. bytesRead = 0.6 * filesDataAmount;
  1093. percent = 60;
  1094. WpFileUploadEvent.initWithCleanFile(wfu);
  1095. // 更新进度条
  1096. WpFileUploadTools.showUploadProgress(wfu, bytesRead, percent);
  1097. }
  1098. }
  1099. },
  1100. /**
  1101. * 显示进度条
  1102. * @param wfu 要操作的对象
  1103. * @param bytesRead 已经读取的数量
  1104. * @param percent 已经读取的百分比
  1105. * @param items 当前是第几个文件
  1106. */
  1107. "showUploadProgress":function(wfu,bytesRead,percent,items){
  1108. let fileListArray = WpFileUploadFileList.getFileList(wfu);
  1109. // 如果显示主进度条
  1110. if (wfu.showSummerProgress) {
  1111. // 设置主进度条比例
  1112. WpFileUploadTools.setProgressNumber(wfu, percent);
  1113. if (percent == 100) {
  1114. //自定清理
  1115. if (wfu.isAutoClean) {
  1116. setTimeout(function () {
  1117. WpFileUploadEvent.cleanFileEvent(wfu);
  1118. },2000) ;
  1119. }
  1120. }
  1121. }
  1122. if (wfu.showFileItemProgress) {
  1123. // 设置每个文件的状态和进度信息
  1124. if (items == null) {
  1125. WpFileUploadTools.showProgramWithNoItem(wfu,bytesRead,percent,fileListArray);
  1126. } else {
  1127. WpFileUploadTools.showProgramWithItem(wfu,bytesRead,percent,fileListArray,items);
  1128. }
  1129. } else {
  1130. let uploadId = wfu.uploadId;
  1131. let fileItemView = WpFileItemTools.getNeedUploadItemArray(uploadId);
  1132. // 文件状态
  1133. let fileItemStatus = WpFileItemTools.getFileViewStatus(fileItemView);
  1134. fileItemStatus.off();
  1135. // 设置单个文件状态
  1136. fileItemStatus.addClass("iconfont icon-gou");
  1137. WpFileUploadTools.changeUploadButtonsStatus(wfu,1);
  1138. }
  1139. },
  1140. /**
  1141. * 显示进度在不知道当前第几个文件的时候
  1142. * @param wfu 操作的对象
  1143. * @param bytesRead 已阅读的数量
  1144. * @param percent 当前进度百分比
  1145. * @param fileListArray 文件列表
  1146. */
  1147. "showProgramWithNoItem" : function(wfu,bytesRead,percent,fileListArray) {
  1148. for (let i = 0; i < fileListArray.length; i++) {
  1149. if (fileListArray[i] == null) {
  1150. continue;
  1151. }
  1152. // 总上传数减去当前文件的大小,剩余的总数
  1153. let testbytesRead = bytesRead - fileListArray[i].size;
  1154. if (testbytesRead < 0) {
  1155. // 如果已经完成任务100%
  1156. if (percent == 100) {
  1157. //设置失败
  1158. WpFileUploadTools.setFileItemProgress(wfu, i, 100, 1);
  1159. bytesRead = bytesRead-fileListArray[i].size;
  1160. } else {
  1161. //设置比例
  1162. let fileItemPercent = bytesRead / fileListArray[i].size * 100;
  1163. //设置成功相应的比例
  1164. WpFileUploadTools.setFileItemProgress(wfu, i, fileItemPercent, 0);
  1165. break;
  1166. }
  1167. }else if (testbytesRead >= 0) {
  1168. WpFileUploadTools.setFileItemProgress(wfu, i, 100, 0);
  1169. bytesRead = bytesRead-fileListArray[i].size;
  1170. }
  1171. }
  1172. },
  1173. /**
  1174. * 显示进度知道当前第几个文件的时候
  1175. * @param wfu 操作的对象
  1176. * @param bytesRead 已阅读的数量
  1177. * @param percent 当前进度百分比
  1178. * @param fileListArray 文件列表
  1179. */
  1180. "showProgramWithItem" : function(wfu,bytesRead,percent,fileListArray,items) {
  1181. let itemTemp = 1;
  1182. for (let i = 0; i < fileListArray.length; i++) {
  1183. if ((i+1) > items) {
  1184. break;
  1185. }
  1186. if (fileListArray[i] == null) {
  1187. continue;
  1188. }
  1189. if (percent == 100) {
  1190. WpFileUploadTools.setFileItemProgress(wfu, i, 100, 0);
  1191. continue;
  1192. }
  1193. if (itemTemp < items) {
  1194. itemTemp ++;
  1195. bytesRead = bytesRead - fileListArray[i].size;
  1196. WpFileUploadTools.setFileItemProgress(wfu, i, 100, 0);
  1197. } else if(itemTemp == items) {
  1198. let fileItemPercent = WpFileUploadComputer.mul(WpFileUploadComputer.div(bytesRead , fileListArray[i].size) , 100);
  1199. if (fileItemPercent == 100) {
  1200. itemTemp ++;
  1201. bytesRead = bytesRead - fileListArray[i].size;
  1202. }
  1203. WpFileUploadTools.setFileItemProgress(wfu, i, fileItemPercent, 0);
  1204. }
  1205. }
  1206. },
  1207. /**
  1208. * 设置单个文件进度
  1209. * @param wfu 操作的对象
  1210. * @param fileCodeId 文件标记
  1211. * @param percent 百分比
  1212. * @param status 状态,0:成功,1:失败
  1213. */
  1214. "setFileItemProgress" : function (wfu, fileCodeId, percent, status) {
  1215. if (!wfu.showFileItemProgress){
  1216. return;
  1217. }
  1218. let uploadId = wfu.uploadId;
  1219. let fileItemView = WpFileItemTools.getNeedUploadItem(uploadId,fileCodeId);
  1220. // 文件进度
  1221. let fileItemProgress = WpFileItemTools.getFileViewProgress(fileItemView);
  1222. // 文件状态
  1223. let fileItemStatus = WpFileItemTools.getFileViewStatus(fileItemView);
  1224. if (status == 1) {
  1225. if (wfu.showFileItemProgress) {
  1226. fileItemProgress.addClass("error");
  1227. fileItemProgress.css("width", "100%");
  1228. }
  1229. fileItemStatus.addClass("iconfont icon-cha");
  1230. } else if ( status == 0 ) {
  1231. if (wfu.showFileItemProgress) {
  1232. fileItemProgress.css("width", percent + "%");
  1233. }
  1234. if (percent == 100) {
  1235. fileItemStatus.off();
  1236. fileItemStatus.addClass("iconfont icon-gou");
  1237. }
  1238. }
  1239. },
  1240. /**
  1241. * 上传文件失败集体显示
  1242. */
  1243. "uploadError":function(){
  1244. let wfu = this;
  1245. let uploadId = wfu.uploadId;
  1246. // 是否显示单个文件进度条
  1247. if (wfu.showFileItemProgress) {
  1248. let progressObj = WpFileItemTools.getNeedUploadItemArray(uploadId).find(".progress>div");
  1249. progressObj.addClass("error");
  1250. progressObj.css("width","100%");
  1251. } else {
  1252. WpFileUploadTools.changeUploadButtonsStatus(wfu,2);
  1253. }
  1254. let fileItemView = WpFileItemTools.getNeedUploadItemArray(uploadId);
  1255. // 设置单个文件状态
  1256. WpFileItemTools.getFileViewStatus(fileItemView).addClass("iconfont icon-cha");
  1257. // 设置总进度条状态
  1258. WpFileUploadTools.setProgressNumber(wfu,0);
  1259. },
  1260. /**
  1261. * 上传成功
  1262. */
  1263. "uploadSuccess" : function () {
  1264. let wfu = this;
  1265. WpFileUploadTools.setSuccessOfSubmit(wfu);
  1266. },
  1267. /**
  1268. * 改变上传按钮的状态,上传前,之类的
  1269. * @param wfu 操作的对象
  1270. * @param status 操作的状态,0:开始上传 1:成功停止上传 2:失败停止上传
  1271. */
  1272. "changeUploadButtonsStatus":function(wfu, status){
  1273. if (status == 0) {
  1274. // 禁用文件上传
  1275. WpFileUploadTools.disableFileUpload(wfu);
  1276. // 禁用清除文件
  1277. WpFileUploadTools.disableCleanFile(wfu);
  1278. // 禁用文件选择
  1279. WpFileUploadTools.disableFileSelect(wfu);
  1280. } else if (status == 1) {
  1281. // 删除要上传的文件,但是注意,不会上传已经上传了的文件
  1282. if(wfu.isAutoClean) {
  1283. WpFileUploadEvent.cleanFileEvent(wfu);
  1284. } else {
  1285. WpFileUploadEvent.initWithCleanFile(wfu);
  1286. // 初始化上传
  1287. WpFileUploadEvent.initWithUpload(wfu);
  1288. WpFileUploadEvent.initWithSelectFile(wfu);
  1289. WpFileUploadEvent.stopUpload(wfu);
  1290. }
  1291. } else if (status == 2) {
  1292. // 初始化上传
  1293. WpFileUploadEvent.initWithCleanFile(wfu);
  1294. WpFileUploadEvent.initWithUpload(wfu);
  1295. WpFileUploadEvent.initWithSelectFile(wfu);
  1296. WpFileUploadEvent.stopUpload(wfu);
  1297. }
  1298. },
  1299. /**
  1300. * 禁用文件选择
  1301. * @param wfu 操作的对象
  1302. */
  1303. "disableFileSelect":function(wfu){
  1304. let uploadId = wfu.uploadId;
  1305. let selectFileBt = $("#"+uploadId+" .uploadBts .selectFileBt");
  1306. selectFileBt.css("background-color","#DDDDDD");
  1307. selectFileBt.off();
  1308. },
  1309. /**
  1310. * 禁用文件上传
  1311. * @param wfu 操作的对象
  1312. */
  1313. "disableFileUpload":function(wfu){
  1314. if (!wfu.isHiddenUploadBt) {
  1315. let uploadId = wfu.uploadId;
  1316. let uploadFileBt = $("#"+uploadId+" .uploadBts .uploadFileBt");
  1317. let uploadFileBtIcon = $("#"+uploadId+" .uploadBts .uploadFileBt i");
  1318. uploadFileBt.off();
  1319. uploadFileBtIcon.css("color","#DDDDDD");
  1320. }
  1321. },
  1322. /**
  1323. * 禁用文件清除
  1324. * @param wfu 操作的对象
  1325. */
  1326. "disableCleanFile":function(wfu){
  1327. if (!wfu.isHiddenCleanBt) {
  1328. let uploadId = wfu.uploadId;
  1329. let cleanFileBt = $("#"+uploadId+" .uploadBts .cleanFileBt");
  1330. let cleanFileBtIcon = $("#"+uploadId+" .uploadBts .cleanFileBt i");
  1331. cleanFileBt.off();
  1332. cleanFileBtIcon.css("color","#DDDDDD");
  1333. }
  1334. },
  1335. /**
  1336. * 设置上传成功
  1337. * @param wfu 操作的对象
  1338. */
  1339. "setSuccessOfSubmit" : function(wfu) {
  1340. let progressUrl = wfu.progressUrl;
  1341. if(!wfu.scheduleStandard && (progressUrl == null || progressUrl == "" || progressUrl === "#")) {
  1342. let bytesRead = WpFileUploadFileList.getFilesDataAmount(wfu);
  1343. WpFileUploadTools.showUploadProgress(wfu, bytesRead, 100);
  1344. }
  1345. },
  1346. /**
  1347. * 根据图片地址url获取文件的名称
  1348. * @param fileUrl 文件地址Url
  1349. */
  1350. "getFileNameWithUrl" : function(fileUrl) {
  1351. let index = fileUrl.lastIndexOf("/");
  1352. if(index<=0){
  1353. index = fileUrl.lastIndexOf("\\");
  1354. }
  1355. index = index+1;
  1356. let fileName = fileUrl.substring(index,fileUrl.length);
  1357. return fileName;
  1358. }
  1359. };
  1360. /**
  1361. * 信息提示
  1362. * @type {{}}
  1363. */
  1364. let WpFileUploadMessage = {
  1365. /**
  1366. * 错误提示
  1367. * @param message 提示信息
  1368. */
  1369. "error" : function (message) {
  1370. console.error(message)
  1371. },
  1372. /**
  1373. * 普通信息提示
  1374. * @param message 提示信息
  1375. */
  1376. "info" : function(message) {
  1377. console.info(message);
  1378. },
  1379. /**
  1380. * 警告提醒
  1381. * @param message 提示信息
  1382. */
  1383. "warn" : function (message) {
  1384. console.warn(message);
  1385. }
  1386. };
  1387. /**
  1388. * 信息提示模板
  1389. * @type {{}}
  1390. */
  1391. let WpFileUploadMessageModel = {
  1392. /**
  1393. * 容器Id不存在
  1394. */
  1395. "notExitUploadId":"要设定一个容器id!",
  1396. /**
  1397. * 初始化配置格式错误
  1398. */
  1399. "initConfigFormatError":"初始化参数错误:参数类型应该为对象类型,如:{\"uploadUrl\":\"xxxxxx\"}",
  1400. /**
  1401. * 超出最大文件限制
  1402. * @param maxFileNumber 最大文件数量
  1403. * @return {string} 返回信息内容
  1404. */
  1405. "outMaxFileNumber" : function (maxFileNumber) {
  1406. return "文件数量错误:最多只能上传"+maxFileNumber+"个文件"
  1407. },
  1408. /**
  1409. * 文件已经存在
  1410. * @param fileName 文件名
  1411. */
  1412. "fileIsExit" : function (fileName) {
  1413. return "重复上传文件错误:文件("+fileName+")已经存在!";
  1414. },
  1415. /**
  1416. * 文件已经上传过了
  1417. * @param fileName 文件名
  1418. */
  1419. "fileIsHaveUpload" : function (fileName) {
  1420. return "多次上传文件错误:文件("+fileName+")已经上传过,不能再次上传!";
  1421. },
  1422. /**
  1423. * 文件总大小超出上传限制
  1424. * @param totalSize 上传限制的总大小
  1425. */
  1426. "outOfTotalSize" : function (totalSize) {
  1427. return "文件总大小限制错误:文件加入已超出总大小限制!请控制在"+totalSize+"KB以内,或多次上传";
  1428. },
  1429. /**
  1430. * 单个文件超出大小限定
  1431. * @param fileName 文件名字
  1432. * @param fileSizeLimit 单个文件的限定大小
  1433. */
  1434. "outOfSize" : function (fileName,fileSizeLimit) {
  1435. return "文件大小限制错误:文件("+fileName+")超出了大小限制!请控制在"+fileSizeLimit+"KB内"
  1436. },
  1437. /**
  1438. * 不支持文件类型错误
  1439. * @param fileName 文件名称
  1440. */
  1441. "notSupperFileType" : function (fileName) {
  1442. return "文件格式错误:不支持该格式文件上传:"+fileName;
  1443. },
  1444. /**
  1445. * 没有要上传的文件
  1446. */
  1447. "noFileUpload" : "没有要上传的文件!",
  1448. /**
  1449. * 没有上传的地址,进行模拟上传,不会上传,但是会进行模拟上传的过程
  1450. */
  1451. "noUploadUrl" : "没有上传的地址,进行模拟上传......"
  1452. };
  1453. /**
  1454. * 解决浮点计算精度问题
  1455. */
  1456. let WpFileUploadComputer = {
  1457. /**
  1458. * 加法运算
  1459. * @param a 参数
  1460. * @param b 参数
  1461. */
  1462. "add" : function (a, b) {
  1463. let c, d, e;
  1464. try {
  1465. c = a.toString().split(".")[1].length;
  1466. } catch (f) {
  1467. c = 0;
  1468. }
  1469. try {
  1470. d = b.toString().split(".")[1].length;
  1471. } catch (f) {
  1472. d = 0;
  1473. }
  1474. return e = Math.pow(10, Math.max(c, d)), (WpFileUploadComputer.mul(a, e) + WpFileUploadComputer.mul(b, e)) / e;
  1475. },
  1476. /**
  1477. * 减法
  1478. * @param a 参数
  1479. * @param b 参数
  1480. */
  1481. "sub" : function (a, b) {
  1482. let c, d, e;
  1483. try {
  1484. c = a.toString().split(".")[1].length;
  1485. } catch (f) {
  1486. c = 0;
  1487. }
  1488. try {
  1489. d = b.toString().split(".")[1].length;
  1490. } catch (f) {
  1491. d = 0;
  1492. }
  1493. return e = Math.pow(10, Math.max(c, d)), (WpFileUploadComputer.mul(a, e) - WpFileUploadComputer.mul(b, e)) / e;
  1494. },
  1495. /**
  1496. * 乘法
  1497. * @param a 参数
  1498. * @param b 参数
  1499. */
  1500. "mul" : function (a, b) {
  1501. var c = 0,
  1502. d = a.toString(),
  1503. e = b.toString();
  1504. try {
  1505. c += d.split(".")[1].length;
  1506. } catch (f) {}
  1507. try {
  1508. c += e.split(".")[1].length;
  1509. } catch (f) {}
  1510. return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c);
  1511. },
  1512. /**
  1513. * 除法
  1514. * @param a 参数
  1515. * @param b 参数
  1516. */
  1517. "div" : function (a, b) {
  1518. let c, d, e = 0,
  1519. f = 0;
  1520. try {
  1521. e = a.toString().split(".")[1].length;
  1522. } catch (g) {}
  1523. try {
  1524. f = b.toString().split(".")[1].length;
  1525. } catch (g) {}
  1526. return c = Number(a.toString().replace(".", "")), d = Number(b.toString().replace(".", "")), WpFileUploadComputer.mul(c / d, Math.pow(10, f - e));
  1527. }
  1528. };
  1529. /**
  1530. * 文件上传工具
  1531. * @type {{getDataWithUploadFile: (function(*): Array), getData: (function(*))}}
  1532. */
  1533. let WpFileUploadFormTools = {
  1534. /**
  1535. * 获取表单json数据
  1536. * @param formId 表单ID
  1537. */
  1538. "getFormData" : function(formId) {
  1539. let formData = {};
  1540. let $form = $("#"+formId);
  1541. let input_doms = $form.find("input[name][ignore!='true'],textarea[name][ignore!='true']");
  1542. let select_doms = $form.find("select[name][ignore!='true']");
  1543. for (let i = 0; i < input_doms.length; i++) {
  1544. let inputItem = input_doms.eq(i);
  1545. let inputName="";
  1546. if (inputItem.attr("type") == "radio") {
  1547. if (inputItem.is(":checked")) {
  1548. inputName = inputItem.attr("name");
  1549. formData[inputName] = $.trim(inputItem.val());
  1550. }
  1551. } else {
  1552. inputName = inputItem.attr("name");
  1553. formData[inputName] = $.trim(inputItem.val());
  1554. }
  1555. }
  1556. for (let j = 0; j < select_doms.length; j++) {
  1557. let selectItem = select_doms.eq(j);
  1558. let selectName = selectItem.attr("name");
  1559. formData[selectName] = $.trim(selectItem.val());
  1560. }
  1561. return formData;
  1562. },
  1563. /**
  1564. * 获取表单json数据,以上传文件的形式封装
  1565. * @param formId 表单ID
  1566. * @returns {Array} 表单数据
  1567. */
  1568. "getFormDataOfUploadFile" : function(formId) {
  1569. let formData = [];
  1570. let $form = $("#"+formId);
  1571. let input_doms = $form.find("input[name][ignore!='true'],textarea[name][ignore!='true']");
  1572. let select_doms = $form.find("select[name][ignore!='true']");
  1573. for (let i = 0; i < input_doms.length; i++) {
  1574. let inputItem = input_doms.eq(i);
  1575. let inputName="";
  1576. if (inputItem.attr("type") == "radio") {
  1577. if (inputItem.is(":checked")) {
  1578. inputName = inputItem.attr("name");
  1579. formData[formData.length] = {"name":inputName, "value":$.trim(inputItem.val())}
  1580. }
  1581. }else{
  1582. inputName = inputItem.attr("name");
  1583. formData[formData.length] = {"name":inputName, "value":$.trim(inputItem.val())}
  1584. }
  1585. }
  1586. for (let j = 0; j < select_doms.length; j++) {
  1587. let selectItem = select_doms.eq(j);
  1588. let selectName = selectItem.attr("name");
  1589. formData[formData.length] = {"name":selectName, "value":$.trim(selectItem.val())}
  1590. }
  1591. return formData;
  1592. }
  1593. };
  1594. /**
  1595. * 获取文件视图对象工具
  1596. * @type {{getNeedUploadItemArray: WpFileItemTools.getNeedUploadItemArray, getIsUploadItemArray: WpFileItemTools.getIsUploadItemArray, getNeedUploadItem: WpFileItemTools.getNeedUploadItem, getIsUploadItem: WpFileItemTools.getIsUploadItem}}
  1597. */
  1598. let WpFileItemTools = {
  1599. /**
  1600. * 获取需要上传的文件对象数组
  1601. * @param uploadId 文件上传Id
  1602. */
  1603. "getNeedUploadItemArray" : function (uploadId) {
  1604. return $("#"+uploadId+" .boximgs .fileItem[fileCodeId]");
  1605. },
  1606. /**
  1607. * 获取已经上传的文件对象数组
  1608. * @param uploadId 文件上传Id
  1609. */
  1610. "getIsUploadItemArray" : function (uploadId) {
  1611. return $("#"+uploadId+" .boximgs .fileItem[showFileCode]");
  1612. },
  1613. /**
  1614. * 获取某个需要上传的文件对象
  1615. * @param uploadId 文件上传Id
  1616. * @param fileId 文件编号Id
  1617. */
  1618. "getNeedUploadItem" : function (uploadId, fileId) {
  1619. return $("#"+uploadId+" .boximgs .fileItem[fileCodeId='" + fileId + "']");
  1620. },
  1621. /**
  1622. * 获取某个已经上传的文件对象
  1623. * @param uploadId 文件上传Id
  1624. * @param fileId 文件编号Id
  1625. */
  1626. "getIsUploadItem" : function (uploadId, fileId) {
  1627. return $("#"+uploadId+" .boximgs .fileItem[showFileCode='" + fileId + "']");
  1628. },
  1629. /**
  1630. * 获取所示所有文件的视图单例对象,这里不区分是否已经上传
  1631. * @param uploadId 文件上传Id
  1632. */
  1633. "getFileViewArray" : function (uploadId){
  1634. return $("#"+uploadId+" .boximgs .fileItem");
  1635. },
  1636. /**
  1637. * 获取文件视图进度条
  1638. * @param viewObj 获取到的文件视图对象,注意是jquery对象
  1639. */
  1640. "getFileViewProgress" : function (viewObj) {
  1641. return viewObj.find(".progress>div");
  1642. },
  1643. /**
  1644. * 获取文件视图状态标识
  1645. * @param viewObj 获取到的文件视图对象,注意是jquery对象
  1646. */
  1647. "getFileViewStatus" : function (viewObj) {
  1648. return viewObj.find(".status>i");
  1649. },
  1650. /**
  1651. * 获取文件视图状态删除的按钮
  1652. * @param viewObj 获取到的文件视图对象,注意是jquery对象
  1653. */
  1654. "getFileViewRemove" : function(viewObj) {
  1655. return viewObj.find(".status .icon-shanchu");
  1656. },
  1657. /**
  1658. * 获取文件下载按钮
  1659. * @param viewObj 获取到的文件视图对象,注意是jquery对象
  1660. */
  1661. "getFileViewDown" : function (viewObj) {
  1662. return viewObj.find(".down .icon-xiazai");
  1663. }
  1664. };