Ajax--带进度条的文件上传
2017-06-03 16:03
316 查看
1.由于使用Ajax，需要创建一个封装Ajax必须 实现功能的对象AjaxRequest，保存为AjaxRequest.js（代码已经在上文中说明）
2.在CSS样式表文件style.css中，设置背景，添加用于控制进度条样式的CSS样式。（这个自己决定）
示例：
3.在应用Ajax的页面上，引入AjaxRequest.js文件和编写错误处理的方法，实例化Ajax对象的方法，回调函数。再加上处理表单的函数
deal这个函数的作用：用调用了上面的getProgress函，每隔1000毫秒调用一次。
getProgress：实例化AjaxRequest对象，同时使用deal_p（deal_p---显示进度条进度和百分比）
点击上传按钮，提交form1的表单，使用UpLoad上传文件的同时，调用了deal这个JS函数。
4.编写上传文件的Servlet实现类--UpLoad。实现文件上传在之前的文章就说过需要两个第三组件：commons-fileupLoad-1.3.2.jar 和 commons-io-2.5.jar，将两个组件 放到当前应用项目的WEB-INF\lib的目录下（上传页面调用UpLoad这个Servlet时，采用显示传参的方法（将参数写到链接中））
代码示例：
showProgress.jsp只是显示进度条的进度
error.jsp 代码：
upFile_deal.jsp 文件上传成功弹出的对话框，点击确定又返回到上传界面：
注意：在这句话
language下面有黄线，是HTML的版本不对，缺少了这句话：
2.在CSS样式表文件style.css中，设置背景，添加用于控制进度条样式的CSS样式。（这个自己决定）
示例：
.prog_border {
height: 15px; /*高度*/
width: 255px; /*宽度*/
background: #9ce0fd; /*背景颜色*/
border: 1px solid #FFFFFF; /*边框样式*/
margin: 0;
padding: 0;
display:none; /*不显示*/
position:relative;
left:25px;
float:left; /*居左对齐*/
}3.在应用Ajax的页面上，引入AjaxRequest.js文件和编写错误处理的方法，实例化Ajax对象的方法，回调函数。再加上处理表单的函数
deal这个函数的作用：用调用了上面的getProgress函，每隔1000毫秒调用一次。
getProgress：实例化AjaxRequest对象，同时使用deal_p（deal_p---显示进度条进度和百分比）
<script language="javascript" src="JS/AjaxRequest.js"></script>
<script type="text/javascript" language="javascript" >
function getProgress(){
//显示进度条进度
var loader=new net.AjaxRequest("showProgress.jsp?nocache="+new Date().getTime(), deal_p, onerror, "GET");
}
function onerror(){
alert("上传文件出错");
}
function deal_p(){
var h=this.req.responseText;
h=h.replace(/\s/g,""); //去除字符串中的Unicode空白串
document.getElementById("progressPercent").style.display=""; //显示百分比；
progressPercent.innerHTML=h+"%";
document.getElementById("progressBar").style.display="block"; //显示进度条
document.getElementById("imgProgress").width=h*(255/100); //显示完成的进度
}
function deal(form){
form.submit();
timer=window.setInterval("getProgress()", 500);
}
</script>在页面添加上表单（包含上传文件，进度条等）<body> <form name="form1" enctype="multipart/form-data" method="post" action="UpLoad?action=uploadFile"> <table width="500" height="289" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bg.jpg"> <tr> <td width="61" rowspan="2"> </td> <td width="439" align="center"> <table width="80%" height="190" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center"> </td> </tr> <tr> <td height="34" style="color:#FFFFFF">请选择上传的文件：</td> </tr> <tr> <td height="42"><input name="file" type="file" size="42"></td> </tr> <tr> <td height="50" style="color:#FFFFFF"> 注：文件大小请控制在50M以内。</td> </tr> <tr> <td height="29" align="center" style="color:#FFFFFF"> <div id="progressBar" class="prog_border" align="left"> <img src="images/progressBar.jpg" width="0" height="13" id="imgProgress"></div> ??<span id="progressPercent" style="width:40px;display:none">0%</span></td> </tr> <tr> <td height="29" align="center"><img src="images/shangchuan.gif" width="61" height="23" onClick="deal(form1)"> <img src="images/chongzhi.gif" width="61" height="23" onClick="form1.reset();"> </td></tr> </table> </td> </tr> </table> </form> </body>
点击上传按钮，提交form1的表单，使用UpLoad上传文件的同时，调用了deal这个JS函数。
4.编写上传文件的Servlet实现类--UpLoad。实现文件上传在之前的文章就说过需要两个第三组件：commons-fileupLoad-1.3.2.jar 和 commons-io-2.5.jar，将两个组件 放到当前应用项目的WEB-INF\lib的目录下（上传页面调用UpLoad这个Servlet时，采用显示传参的方法（将参数写到链接中））
代码示例：
package load;
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.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;
@WebServlet("/UpLoad")
public class UpLoad extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String action = request.getParameter("action");
if ("uploadFile".equals(action)) {
this.uploadFile(request, response); // 上传文件
}
}
public void uploadFile(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=GBK");
request.setCharacterEncoding("GBK");
HttpSession session = request.getSession();
session.setAttribute("progressBar", 0); // 定义指定上传进度的Session变量
String error = "";
int maxSize = 50 * 1024 * 1024; // 单个上传文件大小的上限
DiskFileItemFactory factory = new DiskFileItemFactory(); // 基于磁盘文件项目创建一个工厂对象
ServletFileUpload upload = new ServletFileUpload(factory); // 创建一个新的文件上传对象
try {
List items = upload.parseRequest(request);// 解析上传请求
Iterator itr = items.iterator();// 枚举方法
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next(); // 获取FileItem对象
if (!item.isFormField()) {// 判断是否为文件域
if (item.getName() != null && !item.getName().equals("")) {// 判断是否选择了文件
long upFileSize = item.getSize(); // 上传文件的大小
String fileName = item.getName(); // 获取文件名
// System.out.println("上传文件的大小:" + item.getSize());
if (upFileSize > maxSize) {
error = "您上传的文件太大，请选择不超过50M的文件";
break;
}
// 此时文件暂存在服务器的内存中
File tempFile = new File(fileName);// 构造临时对象
// String savePath=tempFile.getName();
// //返回上传文件在客户端的完整路径名称
// request.setAttribute("filename", savePath);
@SuppressWarnings("deprecation")
File file = new File(request.getRealPath("/upload"),
tempFile.getName()); // 获取根目录对应的真实物理路径
InputStream is = item.getInputStream();
int buffer = 1024; // 定义缓冲区的大小
int length = 0;
byte[] b = new byte[buffer];
double percent = 0;
FileOutputStream fos = new FileOutputStream(file);
while ((length = is.read(b)) != -1) {
percent += length / (double) upFileSize * 100D; // 计算上传文件的百分比
fos.write(b, 0, length); // 向文件输出流写读取的数据
session.setAttribute("progressBar", Math
.round(percent)); // 将上传百分比保存到Session中
}
fos.close();
Thread.sleep(1000); // 线程休眠1秒
} else {
error = "没有选择上传文件！";
}
}
}
} catch (Exception e) {
e.printStackTrace();
error = "上传文件出现错误：" + e.getMessage();
}
if (!"".equals(error)) {
request.setAttribute("error", error);
request.getRequestDispatcher("error.jsp")
.forward(request, r
4000
esponse);
} else {
request.setAttribute("result", "文件上传成功！");
request.getRequestDispatcher("upFile_deal.jsp").forward(request,
response);
}
}
}showProgress.jsp只是显示进度条的进度
<%@page contentType="text/html" pageEncoding="GB18030"%>
${progressBar}error.jsp 代码：
<%@page contentType="text/html" pageEncoding="GB18030"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>错误提示</title>
</head>
<body>
<h1>${error}</h1>
<input name="btn_return" type="button" value="返回" onClick="history.back(-1);">
</body>
</html>upFile_deal.jsp 文件上传成功弹出的对话框，点击确定又返回到上传界面：
<%@page contentType="text/html" pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文件上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<link href="CSS/style.css" rel="stylesheet">
</head>
<body>
<script language="javascript">
alert("文件上传成功！");
window.location.href="index.jsp";
</script>
</body>
</html>注意：在这句话
<script language="javascript">
language下面有黄线，是HTML的版本不对，缺少了这句话：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 带进度条的文件上传(java+ajax,附源码)
- 利用Ajax FormData实现无刷新带进度条文件上传
- AJAX与JSF实现带进度条的批量上传文件实例
- AJAX与JSF实现带进度条的批量上传文件实例
- AJAX与JSF实现带进度条的批量上传文件实例
- AJAX与JSF实现带进度条的批量上传文件实例
- Ajax上传文件进度条显示
- ajax上传文件进度条实现
- Servlet + Ajax 实现带进度条的文件上传
- AJAX与JSF实现带进度条的批量上传文件实例
- AJAX与JSF实现带进度条的批量上传文件实例
- 带进度条的文件上传(java+ajax,附源码)
- AJAX与JSF实现带进度条的批量上传文件实例
- Ajax + Servlet 实现上传文件进度条显示
- Ajax上传文件进度条Codular
- 采用AJAX实现带进度条的文件上传(C#)
- AJAX与JSF实现带进度条的批量上传文件实例
- AJAX与JSF实现带进度条的批量上传文件实例
- AJAX与JSF实现带进度条的批量上传文件实例
- 使用Java、Jquery、Ajax实现的带进度条的文件上传。