Ajax--带进度条的文件上传

最新推荐文章于 2019-07-23 16:57:54 发布

WYFVV

最新推荐文章于 2019-07-23 16:57:54 发布

阅读量330

点赞数

分类专栏： Java Web 文章标签： ajax 进度条文件上传

本文链接：https://blog.csdn.net/WYFVV/article/details/72852598

版权

Java Web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.由于使用Ajax，需要创建一个封装Ajax必须实现功能的对象AjaxRequest，保存为AjaxRequest.js（代码已经在上文中说明）

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, response);
		} 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">

WYFVV

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录