업로드 진행 상황 을 관리 하 는 AJAX Upload (소스 코드 다운로드)
21672 단어 upload
Prototype + Servlet 의 Example
그래서 Prototype 을 연구 하 는 목적 으로 저 는 곰 곰 이 생각 한 끝 에 Prototype + Servlet 의 간단 한 Example 을 실현 하려 고 했 습 니 다.그 작업 절 차 는 매우 간단 하 다. 1. Form 에서 업로드 파일 Field 를 제출 하 는 동시에 AJAX 를 사용 하여 주기 적 으로 Servlet 에서 상태 정 보 를 문의 하여 업로드 한다.2. 그 다음 에 이 정보 에 따라 진도 항목 과 관련 문 자 를 업데이트 하고 파일 전송 상 태 를 신속하게 반영 한다.3. 사용자 가 업로드 작업 을 취소 하면 해당 하 는 현장 정리 작업 을 합 니 다. 업 로드 된 파일 을 삭제 하고 Form 제출 페이지 에 관련 정 보 를 표시 합 니 다.4. 업로드 가 완료 되면 Form 제출 페이지 에 업 로드 된 파일 내용 (또는 링크) 을 표시 하거나 일부 AJAX SlideShow 애플 리 케 이 션 과 결합 할 수 있 습 니 다.
서버 엔 드 코드: Bean 직렬 화 / 역 직렬 화 작업: XmlUnSerializer 같은 종 류 는 어떤 모양 의 Bean 도 먹 을 수 없 지만 일반적인 Bean, Collection 유형 속성 을 가 진 Bean 과 Bean List 에 대응 하면 충분 합 니 다.{XmlUnSerializer 클래스 의 핵심 방법 serializeBean 과 serializeBean List}:
/**
* bean UTF-8 xml
* @param beanObj
* @return
* @throws IOException
*/
public static String serializeBean(Object beanObj) throws IOException{
…
}
/**
* bean UTF-8 xml
* @param beanObj
* @return
* @throws IOException
*/
public static String serializeBeanList(Object beanListObj) throws IOException{
…
}
파일 업로드 상태 Bean: FileUploadStatus 라 는 클래스 를 사용 하여 파일 업로드 상 태 를 기록 하고 이 를 서버 측 과 웹 클 라 이언 트 간 의 통신 매개체 로 합 니 다. 이 클래스 의 대상 을 XML 서열 화하 여 서버 응답 으로 웹 클 라 이언 트 에 보 냅 니 다.웹 클 라 이언 트 는 자바 스 크 립 트 를 사용 하여 자바 스 크 립 트 버 전의 파일 업로드 상태 대상 을 역 직렬 화 합 니 다.{FileUploadStatus 의 속성}:
//
private long uploadTotalSize=0;
//
private long readTotalSize=0;
//
private int currentUploadFileNum=0;
//
private int successUploadFileCount=0;
//
private String status="";
//
private long processStartTime=0l;
//
private long processEndTime=0l;
//
private long processRunningTime=0l;
// URL
private List uploadFileUrlList=new ArrayList();
//
private boolean cancel=false;
// base
private String baseDir="";
파일 업로드 상태 감시 작업: Common - fileUpload 1.2 버 전 (20070003) 을 사용 합 니 다.이 버 전과 1.1 버 전의 차 이 는 파일 업로드 상황 을 감시 할 수 있 는 ProcessListener 인 터 페 이 스 를 제공 하여 개발 자가 FileUploadBase 클래스 대상 의 setProcessListener 방법 으로 자신의 Listener 를 심 어 주 고 이 Listener 를 실현 하 는 것 이 간단 하 다 는 것 이다.{FileUploadListener 주요 방법 update}:
/**
*
* @param pBytesRead
* @param pContentLength
* @param pItems field
*/
public void update(long pBytesRead, long pContentLength, int pItems){
FileUploadStatus fuploadStatus=BackGroundService.takeOutFileUploadStatusBean(this.session);
logger.debug(" " + pItems+" ");
fuploadStatus.setUploadTotalSize(pContentLength);
//
if (pContentLength == -1) {
logger.debug(" : " + pBytesRead + " bytes.");
fuploadStatus.setStatus(" " + pItems+" : " + pBytesRead + " bytes.");
fuploadStatus.setReadTotalSize(pBytesRead);
fuploadStatus.setSuccessUploadFileCount(pItems);
fuploadStatus.setProcessEndTime(System.currentTimeMillis());
fuploadStatus.setProcessRunningTime(fuploadStatus.getProcessEndTime());
//
} else {
logger.debug(" : " + pBytesRead + " / " + pContentLength+ " bytes.");
fuploadStatus.setStatus(" " + pItems+" : " + pBytesRead + " / " + pContentLength+ " bytes.");
fuploadStatus.setReadTotalSize(pBytesRead);
fuploadStatus.setCurrentUploadFileNum(pItems);
fuploadStatus.setProcessRunningTime(System.currentTimeMillis());
}
BackGroundService.storeFileUploadStatusBean(this.session,fuploadStatus);
}
잘 알 고 있 습 니 다. 저도 FileUpload Status 라 는 Bean 을 Session 에 액세스 합 니 다.
Servlet 구현: BackGround Service 라 는 Servlet 류 는 Form Post 데 이 터 를 수신 하고 상태 폴 링 요청 에 응답 하 며 파일 업로드 취소 요청 을 처리 합 니 다.비록 이러한 기능 을 서로 분리 할 수 있 지만 (예 를 들 어 FileUploadManager 류 를 구성 하 는 것) 간단명료 하고 읽 기 쉬 운 목적 에서 Servlet 에 넣 고 서로 다른 방법 으로 분할 할 뿐이다.{BackGround Service 의 processFileUpload 방법 은 파일 업로드 요청 을 처리 하 는 데 사 용 됩 니 다}:
/**
*
* @param request
* @param response
* @throws IOException
* @throws ServletException
*/
private void processFileUpload(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
DiskFileItemFactory factory = new DiskFileItemFactory();
// ，
factory.setSizeThreshold(10240000);
//
factory.setRepository(new File(request.getRealPath("/upload/temp")));
ServletFileUpload upload = new ServletFileUpload(factory);
// size
upload.setFileSizeMax(10240000);
// request size
upload.setSizeMax(10240000);
upload.setProgressListener(new FileUploadListener(request.getSession()));
// FileUploadStatus Bean
storeFileUploadStatusBean(request.getSession(),initFileUploadStatusBean(request));
String forwardURL="";
try {
List items = upload.parseRequest(request);
// url
for(int i=0;i<items.size();i++){
FileItem item=(FileItem)items.get(i);
if (item.isFormField()){
logger.debug("form Field["+item.getFieldName()+"]="+item.getString());
forwardURL=item.getString();
break;
}
}
//
for(int i=0;i<items.size();i++){
FileItem item=(FileItem)items.get(i);
//
if (takeOutFileUploadStatusBean(request.getSession()).getCancel()){
deleteUploadedFile(request);
break;
}
//
else if (!item.isFormField() && item.getName().length()>0){
String fileName=takeOutFileName(item.getName());
logger.debug(" ["+fileName+"]: "
+request.getRealPath(UPLOAD_DIR)+File.separator+fileName);
File uploadedFile = new File(request.getRealPath(UPLOAD_DIR)+File.separator+fileName);
item.write(uploadedFile);
//
FileUploadStatus fUploadStatus=takeOutFileUploadStatusBean(request.getSession());
fUploadStatus.getUploadFileUrlList().add(fileName);
storeFileUploadStatusBean(request.getSession(),fUploadStatus);
Thread.sleep(500);
}
}
} catch (FileUploadException e) {
logger.error(" :"+e.getMessage());
e.printStackTrace();
uploadExceptionHandle(request," :"+e.getMessage());
} catch (Exception e) {
// TODO Auto-generated catch block
logger.error(" :"+e.getMessage());
e.printStackTrace();
uploadExceptionHandle(request," :"+e.getMessage());
}
if (forwardURL.length()==0){
forwardURL=DEFAULT_UPLOAD_FAILURE_URL;
}
request.getRequestDispatcher(forwardURL).forward(request,response);
}
{BackGround Service 의 response FileUpload StatusPoll 방법 은 파일 업로드 상태 에 대한 문의 요청 을 처리 하 는 데 사 용 됩 니 다}:
/**
*
* @param request
* @param response
* @throws IOException
*/
private void responseFileUploadStatusPoll(HttpServletRequest request,HttpServletResponse response) throws IOException{
response.setContentType("text/xml");
response.setCharacterEncoding("UTF-8");
response.setHeader("Cache-Control", "no-cache");
logger.debug(" ");
response.getWriter().write(XmlUnSerializer.serializeBean(
request.getSession().getAttribute(UPLOAD_STATUS)));
}
{BackGround Service 의 processCancel FileUpload 방법 은 파일 업로드 취소 요청 을 처리 하 는 데 사 용 됩 니 다}:
/ * * 파일 업로드 취소 처리 * @ param request * @ param response * @ throws IOException * / private void processCancelFileUpload (HttpServletRequest request, HttpServletResponse response) throws IOException {FileUploadStatus fUploadStatus = (FileUploadStatus) request. getSession (). getAttribute (UPLOAD STATUS); fUploadStatus. setCancel (true); request. getSession (). setAttribute (UPLOAD STATUS, fUploadStatus); responseFileUploadStatusPoll (request, response);} 웹 클 라 이언 트 코드:
Prototype 은 개발 자 에 게 더 많은 자유 선택 을 제공 합 니 다.
웹 클 라 이언 트 는 Prototype 기반 의 Ajax Wrapper 류 와 XMLdomForAjax 류 를 사 용 했 습 니 다. 전 자 는 Ajax. Request 기능 에 대한 패 키 징 을 실 현 했 고 후 자 는 서버 에서 온 XML Response 에 대한 반 직렬 화 (반 직렬 화 는 JavaScript 대상) 를 실 현 했 습 니 다.Ajax Wrapper 의 리 셋 방법 에서 this 재 작성 문제 가 발생 하지 않도록 저 는 ClassUtils 류 를 사용 하여 모든 종류의 방법 에 클래스 대상 자체 인용 을 등록 하 였 습 니 다. 자세 한 내용 은 와 를 참조 하 십시오. {ClassUtils 류 코드}:
//
var ClassUtils=Class.create();
ClassUtils.prototype={
_ClassUtilsName:''ClassUtils'',
initialize:function(){
},
/**
*
* @param reference
*/
registerFuncSelfLink:function(reference){
for (var n in reference) {
var item = reference[n];
if (item instanceof Function)
item.$ = reference;
}
}
}
{XML 을 자바 스 크 립 트 대상 으로 역 직렬 화 하 는 XMLdomForAjax 클래스 코드}:
var XMLDomForAjax=Class.create();
XMLDomForAjax.prototype={
isDebug:false,
//dom
ELEMENT_NODE:1,
ATTRIBUTE_NODE:2,
TEXT_NODE:3,
CDATA_SECTION_NODE:4,
ENTITY_REFERENCE_NODE:5,
ENTITY_NODE:6,
PROCESSING_INSTRUCTION_NODE:7,
COMMENT_NODE:8,
DOCUMENT_NODE:9,
DOCUMENT_TYPE_NODE:10,
DOCUMENT_FRAGMENT_NODE:11,
NOTATION_NODE:12,
initialize:function(isDebug){
new ClassUtils().registerFuncSelfLink(this);
this.isDebug=isDebug;
},
/**
* dom
* @param xml xml
* @return dom
*/
createDomParser:function(xml){
// code for IE
if (window.ActiveXObject){
var doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(xml);
}
// code for Mozilla, Firefox, Opera, etc.
else{
var parser=new DOMParser();
var doc=parser.parseFromString(xml,"text/xml");
}
return doc;
},
/**
* xml javascript Bean
* @param xml xml
* @return javascript Bean
*/
deserializedBeanFromXML:function (xml){
var funcHolder=arguments.callee.$;
var doc=funcHolder.createDomParser(xml);
// documentElement root
var objDomTree=doc.documentElement;
var obj=new Object();
for (var i=0; i<objDomTree.childNodes.length; i++) {
//
var node=objDomTree.childNodes[i];
// field
if ((node.nodeType==funcHolder.ELEMENT_NODE) && (node.tagName == ''field'')) {
var nodeText=funcHolder.getNodeText(node);
if (funcHolder.isDebug){
alert(node.getAttribute(''name'')+'' type:''+node.getAttribute(''type'')+'' text:''+nodeText);
}
var objFieldValue=null;
//
if (node.getAttribute(''type'')==''java.util.List''){
if (objFieldValue && typeof(objFieldValue)==''Array''){
if (nodeText.length>0){
objFieldValue[objFieldValue.length]=nodeText;
}
}
else{
objFieldValue=new Array();
}
}
else if (node.getAttribute(''type'')==''long''
|| node.getAttribute(''type'')==''java.lang.Long''
|| node.getAttribute(''type'')==''int''
|| node.getAttribute(''type'')==''java.lang.Integer''){
objFieldValue=parseInt(nodeText);
}
else if (node.getAttribute(''type'')==''double''
|| node.getAttribute(''type'')==''float''
|| node.getAttribute(''type'')==''java.lang.Double''
|| node.getAttribute(''type'')==''java.lang.Float''){
objFieldValue=parseFloat(nodeText);
}
else if (node.getAttribute(''type'')==''java.lang.String''){
objFieldValue=nodeText;
}
else{
objFieldValue=nodeText;
}
//
obj[node.getAttribute(''name'')]=objFieldValue;
if (funcHolder.isDebug){
alert(eval(''obj.''+node.getAttribute(''name'')));
}
}
else if (node.nodeType == funcHolder.TEXT_NODE){
if (funcHolder.isDebug){
//alert(''TEXT_NODE'');
}
}
else if (node.nodeType == funcHolder.CDATA_SECTION_NODE){
if (funcHolder.isDebug){
//alert(''CDATA_SECTION_NODE'');
}
}
}
return obj;
},
/**
* dom text
*/
getNodeText:function (node) {
var funcHolder=arguments.callee.$;
// is this a text or CDATA node?
if (node.nodeType == funcHolder.TEXT_NODE || node.nodeType == funcHolder.CDATA_SECTION_NODE) {
return node.data;
}
var i;
var returnValue = [];
for (i = 0; i < node.childNodes.length; i++) {
//
returnValue.push(funcHolder.getNodeText(node.childNodes[i]));
}
return returnValue.join('''');
}
}
{AjaxWrapper putRequest callBackHandler}：
/**
* get server request
* @param url
* @param params
* @param callBackFunction
*/
putRequest:function(url,params,callBackFunction){
var funcHolder=arguments.callee.$;
var xmlHttp = new Ajax.Request(url,
{
method: ''get'',
parameters: params,
requestHeaders:[''my-header-encoding'',''utf-8''],
onFailure: function(){
alert('' ， ， ！'');
},
onSuccess: function(transport){
},
&, nbsp;onComplete: function(transport){
funcHolder.callBackHandler.apply(funcHolder,[transport,callBackFunction]);
}
});
},
/**
*
* @param transport xmlhttp transport
* @param callBackFunction call ，
*/
callBackHandler:function(transport,callBackFunction){
var funcHolder=arguments.callee.$;
if(transport.status!=200){
alert(" , :"+transport.status);
}
else{
funcHolder.xml_source=transport.responseText;
if (funcHolder.debug_flag)
alert(''call callback function'');
if (typeof(callBackFunction)==''function''){
if (funcHolder.debug_flag){
alert(''invoke callbackFunc'');
}
callBackFunction(transport.responseText);
}
else{
if (funcHolder.debug_flag){
alert(''evalFunc callbackFunc'');
}
new execute().evalFunc(callBackFunction,transport.responseText);
}
if (funcHolder.debug_flag)
alert(''end callback function'');
}
}
{ JavaScript ：refreshUploadStatus startProcess/cancelProcess}：
//
function refreshUploadStatus(){
var ajaxW = new AjaxWrapper(false);
ajaxW.putRequest(
''./uploadStatus.action'',
''uploadStatus='',
function(responseText){
var deserialor=new XMLDomForAjax(false);
var uploadInfo=deserialor.deserializedBeanFromXML(responseText);
var progressPercent = Math.ceil(
(uploadInfo.readTotalSize) / uploadInfo.uploadTotalSize * 100);
$(''progressBarText'').innerHTML = '' : ''+progressPercent+''% [''+
(uploadInfo.readTotalSize)+''/''+uploadInfo.uploadTotalSize + '' bytes]''+
'' ''+uploadInfo.currentUploadFileNum+'' ''+
'' : ''+(uploadInfo.processRunningTime-uploadInfo.processStartTime)+'' ms'';
$(''progressStatusText'').innerHTML='' : ''+uploadInfo.status;
$(''totalProgressBarBoxContent'').style.width = parseInt(progressPercent * 3.5) + ''px'';
}
);
}
//
function startProgress(){
Element.show(''progressBar'');
$(''progressBarText'').innerHTML = '' : 0%'';
$(''progressStatusText'').innerHTML='' :'';
$(''uploadButton'').disabled = true;
var periodicalExe=new PeriodicalExecuter(refreshUploadStatus,2);
return true;
}
//
function cancelProgress(){
$(''cancelUploadButton'').disabled = true;
var ajaxW = new AjaxWrapper(false);
ajaxW.putRequest(
''./uploadStatus.action'',
''cancelUpload=true'',
// form ，
function(responseText){
var deserialor=new XMLDomForAjax(false);
var uploadInfo=deserialor.deserializedBeanFromXML(responseText);
$(''progressStatusText'').innerHTML='' : ''+uploadInfo.status;
if (msgInfo.cancel==''true''){
alert('' !'');
window.location.reload();
};
}
);
}
：
시작 페이지
업로드 진행 중...
완 료 된 파일 목록 업로드
사용자 가 업로드 한 페이지 를 취소 합 니 다.
업로드 중 오류 가 발생 했 습 니 다.
소스 코드 다운로드: AjaxFileUpload_u1.war.rar AjaxFileUpload_u2.war.rar AjaxFileUpload_u3.part1.rar AjaxFileUpload_u3.part2.rar
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ant 디자인에서 upload 구성 요소가 큰 파일을 업로드하고 진도표의 진도를 표시하는 실례Upload 구성 요소는 업로드 진도를 가지고 있지만, 스타일을 조정하는 것은 매우 번거롭습니다. 우리가 해야 할 일은 사용자 정의입니다. 우선 페이지에 구성 요소 Upload, Progress 도입 진도표는 리셋된...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
