Ajax应用之文件上传
2017-03-08 10:30
239 查看
文件上传是一个很费时的任务，经常需要用户进行长时间等待，为了让用户在等待过程中，及时了解上传进度，可以在进行文件上传时，显示上传进度条。示例：
index.jsp：
<%@ page language="java" import="java.util.*"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="JS/AjaxRequest.js"></script>
<script language="JavaScript">
//处理文件上传
function deal(form) {
form.submit();
window.setInterval("getProgress()", 500);
}
//获取进度方法
function getProgress() {
var loader = new net.AjaxRequest("showProgress.jsp?nocache="
+ new Date().getTime(), dealProgress, onerror, "GET");
}
//处理获取进度结果
function dealProgress() {
var h = this.req.responseText;
h=h.replace("^s/g","");
document.getElementById("progressPercent").style.display="";
document.getElementById("progressPercent").innerHTML=h+"%";
document.getElementById("progressBar").style.display="block";
document.getElementById("imgProgress").width=h*(255/100);
}
function onerror() {
alert("文件上传出错！");
}
</script>
<title>起始页</title>
</head>
<body>
<form method="post" action="UploadServlet?action=uploadFile"
name="form1" enctype="multipart/form-data">
请选择上传的文件：<input name="file" type="file" size="42"> <img
src="images/upload.jpg" width="61" height="23" onclick="deal(form1)">
</form>
<div id="progressBar" class="progressBar" align="left">
<img src="images/progressBar.jpg" width="0" height="13"
id="imgProgress">
</div>
<span id="progressPercent" style="width: 40px; display: none;">0%</span>
</body>
</html>
UploadServlet：
package com.home.web.servlet;
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.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* Servlet implementation class UploadServlet
*/
@WebServlet("/UploadServlet")
@MultipartConfig(location = "e:/tmp")
public class UploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UploadServlet() {
super();
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
uploadFile(request, response);
}
public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
HttpSession session = request.getSession();
session.setAttribute("progressBar", 0);
String error = "";
int maxSize = 50 * 1024 * 1024;
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
try {
List items = upload.parseRequest(request);
Iterator it = items.iterator();
while (it.hasNext()) {
FileItem item = (FileItem) it.next();
if (!item.isFormField()) {
if (!"".equals(item.getName()) && item.getName() != null) {
long upFileSize = item.getSize();
String fileName = item.getName();
if (upFileSize > maxSize) {
error = "文件不能超过50M";
break;
}
File tempFile = new File(fileName);
File file = new File(request.getRealPath("/upload"), tempFile.getName());
System.out.println(file.getAbsolutePath());
InputStream is = item.getInputStream();
int len = 0;
byte[] b = new byte[1024];
double percent = 0;
FileOutputStream fos = new FileOutputStream(file);
while ((len = is.read(b)) != -1) {
percent += len / (double) upFileSize * 100D;
fos.write(b, 0, len);
session.setAttribute("progressBar", Math.round(percent));
}
fos.close();
Thread.sleep(1000);
} else {
error = "没有选择上传文件";
}
}
}
} catch (Exception e) {
e.printStackTrace();
error = "文件上传出现错误：" + e.getMessage();
}
if (!"".equals(error)) {
request.setAttribute("error", error);
request.getRequestDispatcher("error.jsp").forward(request, response);
} else {
request.setAttribute("result", "文件上传成功！");
request.getRequestDispatcher("result.jsp").forward(request, response);
}
}
}
showProgress.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
${progressBar}
</body>
</html>
index.jsp：
<%@ page language="java" import="java.util.*"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="JS/AjaxRequest.js"></script>
<script language="JavaScript">
//处理文件上传
function deal(form) {
form.submit();
window.setInterval("getProgress()", 500);
}
//获取进度方法
function getProgress() {
var loader = new net.AjaxRequest("showProgress.jsp?nocache="
+ new Date().getTime(), dealProgress, onerror, "GET");
}
//处理获取进度结果
function dealProgress() {
var h = this.req.responseText;
h=h.replace("^s/g","");
document.getElementById("progressPercent").style.display="";
document.getElementById("progressPercent").innerHTML=h+"%";
document.getElementById("progressBar").style.display="block";
document.getElementById("imgProgress").width=h*(255/100);
}
function onerror() {
alert("文件上传出错！");
}
</script>
<title>起始页</title>
</head>
<body>
<form method="post" action="UploadServlet?action=uploadFile"
name="form1" enctype="multipart/form-data">
请选择上传的文件：<input name="file" type="file" size="42"> <img
src="images/upload.jpg" width="61" height="23" onclick="deal(form1)">
</form>
<div id="progressBar" class="progressBar" align="left">
<img src="images/progressBar.jpg" width="0" height="13"
id="imgProgress">
</div>
<span id="progressPercent" style="width: 40px; display: none;">0%</span>
</body>
</html>
UploadServlet：
package com.home.web.servlet;
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.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* Servlet implementation class UploadServlet
*/
@WebServlet("/UploadServlet")
@MultipartConfig(location = "e:/tmp")
public class UploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UploadServlet() {
super();
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
uploadFile(request, response);
}
public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
HttpSession session = request.getSession();
session.setAttribute("progressBar", 0);
String error = "";
int maxSize = 50 * 1024 * 1024;
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
try {
List items = upload.parseRequest(request);
Iterator it = items.iterator();
while (it.hasNext()) {
FileItem item = (FileItem) it.next();
if (!item.isFormField()) {
if (!"".equals(item.getName()) && item.getName() != null) {
long upFileSize = item.getSize();
String fileName = item.getName();
if (upFileSize > maxSize) {
error = "文件不能超过50M";
break;
}
File tempFile = new File(fileName);
File file = new File(request.getRealPath("/upload"), tempFile.getName());
System.out.println(file.getAbsolutePath());
InputStream is = item.getInputStream();
int len = 0;
byte[] b = new byte[1024];
double percent = 0;
FileOutputStream fos = new FileOutputStream(file);
while ((len = is.read(b)) != -1) {
percent += len / (double) upFileSize * 100D;
fos.write(b, 0, len);
session.setAttribute("progressBar", Math.round(percent));
}
fos.close();
Thread.sleep(1000);
} else {
error = "没有选择上传文件";
}
}
}
} catch (Exception e) {
e.printStackTrace();
error = "文件上传出现错误：" + e.getMessage();
}
if (!"".equals(error)) {
request.setAttribute("error", error);
request.getRequestDispatcher("error.jsp").forward(request, response);
} else {
request.setAttribute("result", "文件上传成功！");
request.getRequestDispatcher("result.jsp").forward(request, response);
}
}
}
showProgress.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
${progressBar}
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET - Ajax UpLoadFile 多个大文件上传控件及应用范例
- SpringMVC案例3----spring3.0项目拦截器、ajax、文件上传应用
- 异步上传文件插件AjaxFileUploader在Asp.net MVC中应用
- [原创]Ajax UpLoadFile 多个大文件上传控件及应用范例
- SpringMVC案例3----spring3.0项目拦截器、ajax、文件上传应用
- ajax 文件上传应用简单实现
- ajax 文件上传应用简单实现
- AJAX应用：巧妙的处理文件上传
- Ajax方式提交带文件上传的表单及隐藏iframe应用
- ajax文件上传应用
- Ajax方式提交带文件上传的表单及隐藏iframe应用
- 基于PHP的AJAX技术实现文件异步上传
- AJAX实现基于WEB的文件上传的进度控制
- [精]采用dwr+ajax和struts开发文件上传进度条
- 带进度条的文件上传(java+ajax,附源码)
- AJAX实现基于WEB的文件上传的进度控制
- AJAX实现基于WEB的文件上传的进度控制
- 采用AJAX实现带进度条的文件上传
- 转:使用AjaxPro实现文件上传进度条
- AJAX实现基于WEB的文件上传的进度控制