禅道创建bug支持附件拖拽上传

发表于:2023-10-26 09:57

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:wallezhou    来源:CSDN

  禅道12.2实现,其他版本可能略有不同。
  先查看创建缺陷页面的主要标签,后面为该标签添加拖动事件响应。
  点击添加文件后的列表更新逻辑要搞清楚,使得拖动上传后列表更新,这也是难点所在,因为添加文件列表更新的逻辑在一个压缩后的all.js文件中。
  跟踪到列表更新逻辑的地方,如下图所示:
  下面实现拖拽上传文件的逻辑,在禅道bug页面对应的js文件create.js内添加下面的内容
  $(function){
  //拖拽响应
      const dropBox = document.querySelector("#mainContent");
      dropBox.addEventListener("dragenter",dragEnter,false);
      dropBox.addEventListener("dragover",dragOver,false);
      dropBox.addEventListener("drop",drop,false);
  }
  function dragEnter(e){
  e.stopPropagation();
  e.preventDefault();
  }
  function dragOver(e){
  e.stopPropagation();
  e.preventDefault();
  }
  function drop(e){
  e.stopPropagation();
  e.preventDefault();
  // 当文件拖拽到dropBox区域时,可以在该事件取到files
  const files = e.dataTransfer.files;
  $(":file:last").prop("files", files);
      bupdate(files[0]);
  }
  /**更新附件节点的函数 */
  function bupdate(file){
      //拖动文件后的节点更新,此函数内的变量名参考压缩文件all.js内的b.prototype.update, file相当于a
      const n = !file;
      let m = $("div.file-input.empty:last");
      m.toggleClass("normal", !n).toggleClass("empty", n);
      m.find(".file-title").text(file.name).attr("title", file.name);
      m.find(".file-size").text($.formatBytes(file.size));
      m.find(".file-editbox").val(file.name).attr("size", file.name.length);
      let l = m.data("zui.fileInput");
      l.options.onSelect && l.options.onSelect(file, l);
  }
  其他模块的文件拖拽上传仿此修改即可。
  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号