`

修改了Liferay的Upload progress的Bug

阅读更多
问题描述:
liferay上传文件的时候,用<liferay-ui:upload-progress id="<%= uploadProgressId %>">来引用上传进度条组件(参考document library的上传文件实现/portal/portal-web/docroot/html/portlet/document_library/edit_file_entry.jsp),该组件会创建UploadProgress对象(参考/portal/portal-web/docroot/html/js/liferay/upload_progress.js),创建一个隐藏的iframe,iframe的src是指向/portal/portal-web/docroot/html/portal/upload_progress_poller.jsp,该jsp从session中获得上传文件的percent,通过js来update进度条,然后每隔一秒reload,以此来不断更新进度条,实现如下:
<script type="text/javascript">
parent.<%= HtmlUtil.escape(uploadProgressId) %>.updateBar(<%= percent.intValue() %>, "<%= fileName %>");

<c:if test="<%= percent.intValue() < 100 %>">
setTimeout("window.location.reload();", 1000);
</c:if>
</script>
这种实现方法存在以下几个问题,一,IE上传到饿时候,有时进度条一开始就显示100%,但文件并未完成,这和使用window.location.reload()来实现,IE缓存有关系。二,由于不断调reload,可以看到浏览器的状态栏不断的发起请求。

修改方法:
1.
使用ajax轮询请求percent数据并更新progress bar,修改upload_progress_poller.jsp,在加载完成后,重复用AJAX调用新加的一个负责生成percent的json数据的Action,实现如下:
<script type="text/javascript">
parent.<%= HtmlUtil.escape(uploadProgressId) %>.updateBar(<%= percent.intValue() %>, "<%= fileName %>");
var tipId;
var isContinue = true;
function updateStatus(){
if (isContinue) {
            isContinue=false;
           parent.jQuery.ajax({
          type: 'POST',
          url: "<%= themeDisplay.getPathMain() %>/portal/upload_progress_status_check?uploadProgressId=<%= uploadProgressId %>",
          dataType: 'json',
          success: function( data )
          {
            var statusPercent = data.percent;
            parent.<%= HtmlUtil.escape(uploadProgressId) %>.updateBar(statusPercent, "<%= fileName %>");
isContinue = true;
            if (statusPercent>=100) {
            window.clearInterval(tipId);
            }
          }
    });
        }

}
<c:if test="<%= percent.intValue() < 100 %>">
tipId=window.setInterval("updateStatus();",1000);
</c:if>
</script>

注释:
1)由于这个jsp是在iframe里面的,不包含jQuery的引用,所以,jQuery的调用,使用parent.jQuery来调用。
2)定时轮询使用window.setInterval("updateStatus();",1000)方法,通过window.clearInterval(tipId)来终止轮询。
3)ajax调用的时间随环境和网络响应时间会不同,普通轮询会造成调用混乱,在此加了isContinue来保证ajax的顺序轮询调用。

2.
新加的Action:
/portal 5.2.1/ext-impl/src/com/liferay/portal/action/UploadProgressStatusCheckAction.java

实现如下:
package com.liferay.portal.action;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

import com.liferay.portal.kernel.json.JSONFactoryUtil;
import com.liferay.portal.kernel.json.JSONObject;
import com.liferay.portal.upload.LiferayFileUpload;
import com.liferay.util.servlet.ServletResponseUtil;


public class UploadProgressStatusCheckAction extends Action {

public ActionForward execute(
ActionMapping mapping, ActionForm form, HttpServletRequest request,
HttpServletResponse response)
throws Exception {

String uploadProgressId = request.getParameter("uploadProgressId");

String fileName = (String)request.getSession().getAttribute(LiferayFileUpload.FILE_NAME + uploadProgressId);

if (fileName == null) {
fileName = (String)request.getSession().getAttribute(LiferayFileUpload.FILE_NAME);
}

Integer percent = (Integer)request.getSession().getAttribute(LiferayFileUpload.PERCENT + uploadProgressId);

if (percent == null) {
percent = (Integer)request.getSession().getAttribute(LiferayFileUpload.PERCENT);
}
if (percent == null) {
percent = new Integer(0);
}

if (percent.floatValue() >= 100) {
request.getSession().removeAttribute(LiferayFileUpload.FILE_NAME);
request.getSession().removeAttribute(LiferayFileUpload.FILE_NAME + uploadProgressId);
request.getSession().removeAttribute(LiferayFileUpload.PERCENT);
request.getSession().removeAttribute(LiferayFileUpload.PERCENT + uploadProgressId);
}

JSONObject percentObj = JSONFactoryUtil.createJSONObject();
percentObj.put("percent", percent);

ServletResponseUtil.write(response, percentObj.toString());


return null;
}

}

3.
在/portal 5.2.1/ext-web/docroot/WEB-INF/struts-config.xml中新加一个配置:
<!--upload progress update-->
        <action path="/portal/upload_progress_status_check" type="com.liferay.portal.action.UploadProgressStatusCheckAction" />
分享到:
评论

相关推荐

    Liferay 多文件上传与下载实例

    Liferay多文件上传与下载实例,前端包含多文件上传JS,可以...也算是绕开了一个Liferay大的Bug。 本实例的版本是基于:liferay-portal-6.2.10.1-ee-ga1,可能用的版本和亲们不同,但是代码可以复制过去使用。绝对可行!

    Liferay Portal Liferay IDE

    Liferay Portal Liferay IDE

    liferay 6.0 开发指南

    - **覆盖Language.properties文件**:说明了如何更改Liferay的国际化字符串。 #### 六、Ext-plugins 第六章介绍了如何利用Ext-plugins来扩展Liferay的功能。 - **创建Ext-plugin**:指导如何创建一个基本的Ext-...

    liferay扩展环境 liferay ext

    Liferay Ext允许开发者在不修改核心代码的情况下对Liferay进行高级定制,这包括添加新的portlet、服务、主题以及系统级别的配置。 描述中提到的链接指向了一篇博客文章,虽然内容未提供,但通常这类资源会包含有关...

    liferay详细讲解 liferay项目完全讲解

    Liferay是一款开源的企业级门户平台,它提供了丰富的功能和高度可定制性,广泛应用于构建企业网站、内部系统、协作平台等。在这个“liferay详细讲解 liferay项目完全讲解”的资料包中,我们可以期待深入了解到关于...

    liferay

    - **新增、重命名用户组**:根据需要创建新的用户组或更改现有用户组的名称。 - **修改用户组**:调整用户组的成员或权限。 - **定义角色**:角色代表了一组权限的集合,可以赋予用户或用户组。 - **新增、重命名...

    Liferay 6 入门教程

    "plugins开发指南8-Ext Plugin.pdf"介绍了EXT插件,它允许开发者对Liferay的核心功能进行修改,而不影响其他插件或升级。 Struts2是一个流行的MVC框架,"plugins开发指南12-liferay6中struts2开发.pdf"将介绍如何在...

    liferay开发环境搭建

    当需要部署更改时,只需更新Liferay服务器即可。 这个开发环境的搭建过程虽然相对复杂,但是一旦完成,开发者就可以方便地进行Liferay插件和门户的开发,测试和调试。记得每次更改后都要重新构建和部署,以便在实际...

    liferay快速入门quickstart

    ### Liferay快速入门知识点详解 #### 一、Liferay Portal简介与快速启动 Liferay Portal是一款功能强大且灵活的企业级门户平台,它基于Java技术,遵循JSR-168标准,提供了丰富的特性来满足企业内外部网站的需求。...

    liferay-developer-guide-6.0_liferay_

    钩子允许你扩展或修改Liferay的默认行为,而无需更改其源代码。布局则决定了页面的显示样式和结构。书中会介绍如何创建和部署这两种类型的插件。 在安全性方面,Liferay的权限系统是其强大功能的一部分。开发者需要...

    liferay 超级学习文档

    Liferay 采用模块化设计,支持服务导向架构(SOA),使得开发者可以轻松地添加或修改功能。其核心组件包括portlet容器、主题引擎、工作流系统、内容管理系统等,这些都为创建企业级门户提供了坚实的基础。 二、Java...

    LIFERAY-HOOK 开发指南

    在Liferay框架中,Hook是一种强大的工具,它允许开发者对Liferay核心功能进行扩展和定制,而无需直接修改Liferay源代码。LIFERAY-HOOK开发指南主要涵盖了如何利用Hook实现特定功能的详细步骤,以确保二次开发的代码...

    liferay经典书籍8本

    Liferay是一款开源的企业级门户平台,它提供了丰富的功能来构建和管理数字体验,包括网站创建、内容管理、社交协作以及工作流程。以下是对这8本Liferay经典书籍的知识点总结,旨在帮助读者深入理解并掌握Liferay的...

    liferay经典的例子源码

    "hello-world-ext"通常会展示如何创建一个基本的扩展包,这个包可以在Liferay运行时添加新的功能或者修改现有功能。在这个项目中,开发者可能会创建一个新的portlet,这个portlet会在门户页面上显示"Hello, World!...

    liferay开发文档集合

    6. **《liferay_4_customization_guide.pdf》** - 讲解了如何自定义Liferay的外观和行为,包括主题创建、布局调整、CSS和JavaScript的修改,以及portlet和页面的个性化设置,帮助用户打造出符合企业品牌形象的门户...

    Liferay合集.zip

    这个名为"Liferay合集.zip"的压缩包包含了多本关于Liferay的重要书籍,如《Liferay in Action》、《Liferay Portal Systems Development》和《Liferay User Interface Development》,以及一些中文文档,这些资源...

    liferay 整合struts例子

    Liferay是一款开源的企业级门户平台,它提供了丰富的功能和高度的可扩展性。Struts则是一个经典的MVC(模型-视图-控制器)框架,用于构建Java Web应用程序。将Liferay与Struts整合,可以充分利用Struts的业务逻辑...

    liferay-portal详解

    liferay-portal详解 Liferay Portal 是一个基于 Java 的开源门户平台,提供了一个灵活的框架来构建企业门户和 web 应用程序。本文档将从架构解析、portal 规范、portlet 容器、portlet 生命周期、liferay portal ...

Global site tag (gtag.js) - Google Analytics