修改了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" />
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值