ajax实现文件上传以及进度条显示 东海 陈光剑 20120815.docx

Ajax实现文件上传以及进度条显示 东海 陈光剑 20120815 10 / 10Ajax实现文件上传以及进度条显示东海 陈光剑 20120815Upfile.html var xmlHttp; var bar_color = green; var span_id = block; var clear =     function createXMLHttpRequest() /创建XMLHttpRequest对象 if (window.ActiveXObject) xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); function goUpFile()var obj=document.getElementById(file1);if(obj.value = )alert(请选择需要上传的文件);return false; createXMLHttpRequest(); checkDiv(); var url = uploadbar.jsp?task=create; /设置处理文件上传的服务器地址 var button = document.getElementById(go); button.disabled = true; xmlHttp.open(GET, url, true); /发送请求 xmlHttp.onreadystatechange = goCallback; /设置回调函数 xmlHttp.send(null); function goCallback() if (xmlHttp.readyState = 4) if (xmlHttp.status = 200) setTimeout(pollServer(), 200); function pollServer() createXMLHttpRequest(); var url = uploadbar.jsp?task=poll; /设置处理进度条的服务器地址 xmlHttp.open(GET, url, true); xmlHttp.onreadystatechange = pollCallback; xmlHttp.send(null); function pollCallback() /实现进度条 if (xmlHttp.readyState = 4) if (xmlHttp.status = 200) var percent_complete = xmlHttp.responseXML.getElementsByTagName(percent)0.firstChild.data; var index = processResult(percent_complete); for (var i = 1; i index & next_cell = 10) document.getElementById(block + next_cell).innerHTML = percent_complete + %; if (index 10) setTimeout(pollServer(), 200); else document.getElementById(complete).innerHTML = 完成; document.getElementById(go).disabled = false;upfileform.enctype=multipart/form-data;upfileform.action=upfile.jsp;upfileform.submit(); function processResult(percent_complete) var ind; if (percent_complete.length = 1) ind = 1; else if (percent_complete.length = 2) ind = percent_complete.substring(0, 1); else ind = 10; return ind; function checkDiv() var progress_bar = document.getElementById(progressBar); if (progress_bar.style.visibility = visible) clearBar(); document.getElementById(complete).innerHTML = ; else progress_bar.style.visibility = visible function clearBar() for (var i = 1; i 11; i+) var elem = document.getElementById(block + i); elem.innerHTML = clear; elem.style.backgroundColor = white; 实现文件上传进度条                                        uploadbar.jsp% String task = request.getParameter(task); /获得参数值 String res = ; if (task.equals(create) res = 1; counter = 1; else String percent = ; switch (counter) case 1: percent = 10; break; case 2: percent = 20; break; case 3: percent = 30; break; case 4: percent = 40; break; case 5: percent = 50; break; case 6: percent = 60; break; case 7: percent = 70; break;case 8: percent = 80; break; case 9: percent = 90; break; case 10: percent = 100; break; counter+; res = + percent + ; response.setContentType(text/xml); /设置内容类型 response.setHeader(Cache-Control, no-cache); out.println(); out.println(res); out.println(); %upfile.jsp = 0) in = new DataInputStream(request.getInputStream(); /读入上传的数据 int formDataLength = request.getContentLength(); if(formDataLength MAX_SIZE) out.println(上传的文件字节数不可以超过 + MAX_SIZE + ); return; byte dataBytes = new byteformDataLength; /保存上传文件的数据 int byteRead = 0; int totalBytesRead = 0; while(totalBytesRead formDataLength) /上传的数据保存在byte数组 byteRead = in.read(dataBytes,totalBytesRead,formDataLength); totalBytesRead += byteRead; String file = new String(dataBytes); /根据byte数组创建字符串 String saveFile = file.substring(file.indexOf(filename=) + 10); /取得上传的数据的文件名 saveFile = saveFile.substring(0,saveFile.indexOf(n); saveFile = saveFile.substring(saveFile.lastIndexOf() + 1,saveFile.indexOf(); int lastIndex = contentType.lastIndexOf(=); String boundary = contentType.substring(lastIndex + 1,contentType.length(); String fileName = rootPath + saveFile; int pos; pos = file.indexOf(filename=); pos = file.indexOf(n,pos) + 1; pos = file.indexOf(n,pos) + 1; pos = file.indexOf(n,pos) + 1; int boundaryLocation = file.indexOf(boundary,pos) - 4; int startPos = (file.substring(0,pos).getBytes().length;/取得文件数据的开始的位置 int endPos = (file.substring(0,boundaryLocation).getBytes().length; File checkFile = new File(fileName); if(checkFile.exists() out.println(文件已经存在,请重新上传); return ; File fileDir = new File(rootPath); if(!fileDir.exists() fileDir.mkdirs(); fileOut = new FileOutputStream(fileName); fileOut.write(dataBytes,startPos,(endPos - startPos); fileOut.close(); out.println(文件上传成功！); else String content = request.getContentType(); out.println(上传的数据类型不是是multipart/form-data); catch(Exception ex) throw new ServletException(ex.getMessage(); % request.setCharacterEncoding(utf-8); int MAX_SIZE = 102400 * 102400; /设置上传文件的最大值 String rootPath; DataInputStream in = null; FileOutputStream fileOut = null; String remoteAddr = request.getRemoteAddr(); String serverName = request.getServerName(); String realPath = request.getRealPath(serverName); realPath = realPath.substring(0,realPath.lastIndexOf(); rootPath = realPath + upload;上传的文件的保存路径：Tomcat Serverwebappproject_nameupload File fileDir = new File(rootPath); if(!fileDir.exists() fileDir.mkdirs(); /创建文件目录 fileOut = new FileOutputStream(fileName); fileOut.write(dataBytes,startPos,(endPos - startPos); fileOut.close(); /文件读写流out.println(文件上传成功！); else String content = request.getContentType();