Ajax应用之文件上传

u010142437

已于 2022-04-18 16:32:29 修改

阅读量382

点赞数

分类专栏： JSP Ajax JAVA 文章标签： jsp java ajax 文件上传

于 2017-03-08 10:30:58 首次发布

本文链接：https://blog.csdn.net/u010142437/article/details/60867836

版权

JAVA 同时被 3 个专栏收录

140 篇文章 7 订阅

订阅专栏

JSP

39 篇文章 1 订阅

订阅专栏

Ajax

3 篇文章 0 订阅

订阅专栏

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)

文件上传是一个很费时的任务，经常需要用户进行长时间等待，为了让用户在等待过程中，及时了解上传进度，可以在进行文件上传时，显示上传进度条。示例：

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>

u010142437

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax应用之文件上传

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)文件上传是一个很费时的任务，经常需要用户进行长时间等待，为了让用户在等待过程中，及时了解上传进度，可以在进行文件上传时，显示上传进度条。示例：index.jsp：<%@ page langua...
复制链接

扫一扫