如何在此java上传文件示例中添加进度条?

时间:2017-03-06 13:45:14

标签: java ajax jsp servlets file-upload

我正在创建一个JSP / Servlet Web应用程序,我想通过进度条将文件上传到Servlet。 这是使用jsp和servlet上传文件的示例。 它的工作,但我想添加一个进度条。

FileUploadHandler.java

 import java.io.File;
import java.io.IOException;
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.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**
 * Servlet to handle File upload request from Client
 * @author Javin Paul
 */
public class FileUploadHandler extends HttpServlet {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    private final String UPLOAD_DIRECTORY = "uploads";

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String uploadPath = getServletContext().getRealPath("")
                + File.separator + UPLOAD_DIRECTORY;

        String name = null;
        //process only if its multipart content
        if(ServletFileUpload.isMultipartContent(request)){
            try {
                List<FileItem> multiparts = new ServletFileUpload(
                                         new DiskFileItemFactory()).parseRequest(request);

                for(FileItem item : multiparts){
                    if(!item.isFormField()){
                         name = new File(item.getName()).getName();
                        item.write( new File(uploadPath+name));

                    }
                }

               //File uploaded successfully
               request.setAttribute("message", "File Uploaded Successfully "+uploadPath+ name);
            } catch (Exception ex) {
               request.setAttribute("message", "File Upload Failed due to " + ex);
            }          

        }else{
            request.setAttribute("message",
                                 "Sorry this Servlet only handles file upload request");
        }

        request.getRequestDispatcher("/result.jsp").forward(request, response);

    }

}

upload.jsp

 <%@page contentType="text/html" 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>File Upload Example in JSP and Servlet - Java web application</title>
    </head>

    <body> 
        <div>
            <h3> Choose File to Upload in Server </h3>
            <form action="upload" method="post" enctype="multipart/form-data">
                <input type="file" name="file" />
                <input type="submit" value="upload" />
            </form>          
        </div>

    </body>
</html>

result.jsp

 <%@page contentType="text/html" 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>File Upload Example in JSP and Servlet - Java web application</title>
    </head>

    <body> 
        <div id="result">
            <h3>${requestScope["message"]}</h3>
        </div>

    </body>
</html>

web.xml

 <servlet>
    <servlet-name>FileUploadHandler</servlet-name>
    <servlet-class>FileUploadHandler</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>FileUploadHandler</servlet-name>
    <url-pattern>/upload</url-pattern>
  </servlet-mapping>
  <session-config>
    <session-timeout>30</session-timeout>
  </session-config>

1 个答案:

答案 0 :(得分:-1)

虽然很晚,但请尝试使用以下插件,这样可以让您的用户界面漂亮且非常简单。

https://github.com/blueimp/jQuery-File-Upload

Java示例如下:

https://github.com/blueimp/jQuery-File-Upload/wiki