Ajax + Servlet 实现上传文件进度条显示
作者:admin 日期:2008-12-10
用到了commons-fileupload-1.1.jar和commons-io-1.2.jar两个包
客户端文件upload.jsp
<%@ page language="java" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'upload.jsp' starting page</title>
<script type="text/javascript">
var xmlHttp ;
function createXMLHttp(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
xmlHttp = new XMLHttpRequest() ;
}
}
function ajaxSend(){
createXMLHttp() ;
var content = "status" ;
var url ="upload?status="+content ;
xmlHttp.onreadystatechange = handler ;
xmlHttp.open("POST",url,true) ;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(url) ;
}
function handler(){
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var percent = xmlHttp.responseText ;
var com = document.getElementById("com") ;
var last = document.getElementById("last") ;
var p = document.getElementById("percent") ;
com.setAttribute("width",percent+"%") ;
last.setAttribute("width",(100-percent)+"%") ;
if(percent < 99){
p.innerHTML="已经完成:"+percent+"%" ;
setTimeout("ajaxSend()",100) ;
}
else{
p.innerHTML="已经全部上传!" ;
}
}
}
return true;
}
function mySubmit(form){
form.action="upload" ;
form.submit() ;
ajaxSend()
}
</script>
</head>
<body>
<form enctype="multipart/form-data" name="fileform" method="post"
target="target_upload">
<input type="file" value="浏览" name="fileUpload" />
<input type="button" value="提交" onclick="mySubmit(fileform)" />
</form>
<div id="status">
<table width="100%">
<tbody>
<tr>
<td>
<table width="30%" align="left">
<tbody>
<tr>
<td width="0%" bgcolor="green" height="25px" id="com">
</td>
<td width="100%" bgcolor="#CCCCCC" id="last">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="percent" align="center"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Servlet文件MyUpload.java
package zbq.upload;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
public class MyUpload extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("GBK");
response.setContentType("text; charset=ISO-8859-1");
if ("status".equalsIgnoreCase(request.getParameter("status"))) {
status(response);
} else {
totalSize = request.getContentLength();
response.sendRedirect("upload.jsp");
try {
upload(request);
} catch (FileUploadException e) {
e.printStackTrace();
}
}
}
private void upload(HttpServletRequest request) throws IOException,
FileUploadException {
FileItemFactory factory = new DiskFileItemFactory();
// 通过该工厂对象创建ServletFileUpload对象
ServletFileUpload upload = new ServletFileUpload(factory);
List items = upload.parseRequest(request);
for (Iterator i = items.iterator(); i.hasNext();) {
FileItem fileItem = (FileItem) i.next();
// 如果该FileItem不是表单域
if (!fileItem.isFormField()) {
String fileName = fileItem.getName().substring(
fileItem.getName().lastIndexOf("\\") + 1);
File file = new File("C:\\", fileName);
InputStream in = fileItem.getInputStream();
FileOutputStream out = new FileOutputStream(file);
byte[] buffer = new byte[1024]; // To hold file contents
int n;
while ((n = in.read(buffer)) != -1) {
out.write(buffer, 0, n);
completedSize += (long) n;
}
fileItem.delete();// 内存中删除该数据流
}
}
}
private void status(HttpServletResponse response) throws IOException {
long lastSeconds = (System.currentTimeMillis() - startTime) / 1024;
int percent = (int) (completedSize * 100 / (totalSize + 0.0001));
response.getWriter().print(percent);
}
private long totalSize = 0L;
private long completedSize = 0L;
private long startTime = System.currentTimeMillis();
}
WEB.xml就不用写了吧。
但是在Struts2里边我还很迷糊,它把上传功能给封装了,好是好用,但是不好做上传进度条了。希望能抛砖引玉,各位高手能否做个struts2+ajax实现这个功能
'引用自http://hi.baidu.com/zhaobq27/blog/item/2b5e9895f1b23e49d0135e05.html
客户端文件upload.jsp
<%@ page language="java" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'upload.jsp' starting page</title>
<script type="text/javascript">
var xmlHttp ;
function createXMLHttp(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
xmlHttp = new XMLHttpRequest() ;
}
}
function ajaxSend(){
createXMLHttp() ;
var content = "status" ;
var url ="upload?status="+content ;
xmlHttp.onreadystatechange = handler ;
xmlHttp.open("POST",url,true) ;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(url) ;
}
function handler(){
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var percent = xmlHttp.responseText ;
var com = document.getElementById("com") ;
var last = document.getElementById("last") ;
var p = document.getElementById("percent") ;
com.setAttribute("width",percent+"%") ;
last.setAttribute("width",(100-percent)+"%") ;
if(percent < 99){
p.innerHTML="已经完成:"+percent+"%" ;
setTimeout("ajaxSend()",100) ;
}
else{
p.innerHTML="已经全部上传!" ;
}
}
}
return true;
}
function mySubmit(form){
form.action="upload" ;
form.submit() ;
ajaxSend()
}
</script>
</head>
<body>
<form enctype="multipart/form-data" name="fileform" method="post"
target="target_upload">
<input type="file" value="浏览" name="fileUpload" />
<input type="button" value="提交" onclick="mySubmit(fileform)" />
</form>
<div id="status">
<table width="100%">
<tbody>
<tr>
<td>
<table width="30%" align="left">
<tbody>
<tr>
<td width="0%" bgcolor="green" height="25px" id="com">
</td>
<td width="100%" bgcolor="#CCCCCC" id="last">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="percent" align="center"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Servlet文件MyUpload.java
package zbq.upload;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
public class MyUpload extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("GBK");
response.setContentType("text; charset=ISO-8859-1");
if ("status".equalsIgnoreCase(request.getParameter("status"))) {
status(response);
} else {
totalSize = request.getContentLength();
response.sendRedirect("upload.jsp");
try {
upload(request);
} catch (FileUploadException e) {
e.printStackTrace();
}
}
}
private void upload(HttpServletRequest request) throws IOException,
FileUploadException {
FileItemFactory factory = new DiskFileItemFactory();
// 通过该工厂对象创建ServletFileUpload对象
ServletFileUpload upload = new ServletFileUpload(factory);
List items = upload.parseRequest(request);
for (Iterator i = items.iterator(); i.hasNext();) {
FileItem fileItem = (FileItem) i.next();
// 如果该FileItem不是表单域
if (!fileItem.isFormField()) {
String fileName = fileItem.getName().substring(
fileItem.getName().lastIndexOf("\\") + 1);
File file = new File("C:\\", fileName);
InputStream in = fileItem.getInputStream();
FileOutputStream out = new FileOutputStream(file);
byte[] buffer = new byte[1024]; // To hold file contents
int n;
while ((n = in.read(buffer)) != -1) {
out.write(buffer, 0, n);
completedSize += (long) n;
}
fileItem.delete();// 内存中删除该数据流
}
}
}
private void status(HttpServletResponse response) throws IOException {
long lastSeconds = (System.currentTimeMillis() - startTime) / 1024;
int percent = (int) (completedSize * 100 / (totalSize + 0.0001));
response.getWriter().print(percent);
}
private long totalSize = 0L;
private long completedSize = 0L;
private long startTime = System.currentTimeMillis();
}
WEB.xml就不用写了吧。
但是在Struts2里边我还很迷糊,它把上传功能给封装了,好是好用,但是不好做上传进度条了。希望能抛砖引玉,各位高手能否做个struts2+ajax实现这个功能
'引用自http://hi.baidu.com/zhaobq27/blog/item/2b5e9895f1b23e49d0135e05.html
评论: 0 | 引用: 0 | 查看次数: 2386
发表评论
你没有权限发表留言!