带有进度条文件上传（UploadFile+AJAX+监听器）

最新推荐文章于 2023-09-24 17:07:06 发布

keyu0915

最新推荐文章于 2023-09-24 17:07:06 发布

阅读量614

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/keyu0915/article/details/78732981

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

上传页面的jsp部分代码

<form action="/text2/UploadSoftware"  id="testform" method="post" enctype="multipart/form-data"  οnsubmit="return show('fileID'); ">
	<input type="file" name="file" id="fileID" placeholder="请选择文件">
	<button type="submit" value="Submit" id="yes" >确 定</button>  
</form>

上传页面的js代码，利用AJAX定时访问后台程序更新进度条的状态

/*################################################进度条显示#####################################################
 * 1.利用了AJAX定时刷新页面的方法
 *   date:2017/12/4
 *   author:keyu
 * */
var _finished = true;

function $(obj){
    return document.getElementById(obj);
}
/*表单检查，如果上传文件不是zip文件则拒绝*/
function show(ID){
    var softwareName = document.getElementById(ID).value;  
    var loginForm = document.getElementById('testform');
    var sname = softwareName.split('.');
    sname = sname[sname.length-1];
    var str="zip";
    if(!(sname == str)){
    	alert("你上传的不是.zip文件");
    	return false;
    }
    showStatus();
    loginForm.submit();
}
/*进度条显示*/
function showStatus(){
    _finished = false;
    $('status').style.display = 'block'; 
    $('progressBarItem').style.width = '1%'; 
    $('yes').disabled = true;
    setTimeout("requestStatus()", 200); 
}

function requestStatus(){//以get形式打开访问UploadSoftware的doGet（doPost用作文件上传处理，doGet用来获取文件上传的进度）

    if(_finished)   return;

    var req = createRequest(); 

    req.open("GET", "/text2/UploadSoftware");
    req.onreadystatechange=function(){callback(req);}
    req.send(null);

    setTimeout("requestStatus()", 200); 
}

function createRequest()//初始化AJAX对象
{
    if(window.XMLHttpRequest)//ns
    {
        return new XMLHttpRequest();
    }else//IE
    {
        try{
            return new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return null;
}
function callback(req){//访问UploadSoftware的doGet后的回调函数（显示进度）

    if(req.readyState == 4) {
        if(req.status != 200){
        	$('statusInfo').innerHTML ="发生错误。 req.status: " + req.status + "";
            return;
        }
        var ss = req.responseText.split("||");

        // 格式：百分比||已完成数(M)||文件总长度(M)||传输速率(K)||已用时间(s)||估计总时间(s)||估计剩余时间(s)||正在上传第几个文件
        $('progressBarItem').style.width = '' + ss[0] + '%'; 
        $('statusInfo').innerHTML = '已完成百分比: ' + ss[0] + '% <br />已完成数(M): ' + ss[1] + '<br/>文件总长度(M): ' + ss[2] + '<br/>传输速率(M): ' + ss[3] + '<br/>已用时间(s): ' + ss[4] + '<br/>估计总时间(s): ' + ss[5] + '<br/>估计剩余时间(s): ' + ss[6] + '<br/>正在上传第几个文件: ' +ss[7]+'/1';

        if(ss[1] == ss[2]){
            _finished = true;//当上传100%时，doGet访问结束
            $('statusInfo').innerHTML += "<br/>上传已完成。";  
            $('yes').disabled = false;
            alert("上传完成！正等待CA响应（请不要刷新或关闭本页面）");
        }
    }
}

/*#################################################进度条信息####################################################################*/

后台程序，利用了servlet的doPost和doGet方法分别处理文件上传和获取文件上传进度。

/*功能：	上传待签名的文件到RA的recive文件夹
 *方法：
 *		(0)利用监听和AJAX来监听上传的进度
 *		(1)对软件大小进行计算。存入（session变量的softSize中）
 *		(2)读取软件的名字（session变量的softwareName中）
 *		(3)读取软件的上传到recive文件夹的路径名（session变量的filePath中）
 *	    (4)判断是不是.zip文件。（放到前台）
 *		(5)通过callshell复制到Upload文件夹
 *date  :2017/12/5 
 *auther:keyu
 * */

package com.myservlet;
import com.myfile.*;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.DecimalFormat;
import java.util.List;
import javax.servlet.ServletException;
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;



public class UploadSoftware extends HttpServlet{
    private static final long serialVersionUID = 1L;
    private static final String UPLOAD_DIRECTORY = "/home/keyu0915/桌面/recive/";// 上传文件存储目录
    private static final int MEMORY_THRESHOLD   = 1024 * 1024 * 10;  // 文件超过这个值时，会放到临时文件夹，否者在内存里
    private static final int MAX_FILE_SIZE      = 1024 * 1024 * 1000; // 多个文件上传request的最大值，大于就拒绝
    private static final int MAX_REQUEST_SIZE   = 1024 * 1024 * 1000; // 当个文件最大值
 
    /*监听程序*/
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        HttpSession session = req.getSession();
        UploadStatus status =(UploadStatus)session.getAttribute("status");
        
        long startTime = status.getStartTime(); //上传开始时间
        long currentTime = System.currentTimeMillis(); //现在时间
        long time = (currentTime - startTime)/ 1000 + 1; 
        double velocity = ((((double)status.getBytesRead()) / (double)time)/1024)/1024;
        double totalTime = (status.getContentLength())/(velocity*1024*1024);
        double timeLeft = totalTime - time;
        int percent = (int)(100 * (double)status.getBytesRead() / (double)status.getContentLength());
        double length = ((double) status.getBytesRead())/1024/1024;
        double totalLength = ((double) status.getContentLength())/1024/1024;
        
        String returnpercent = String.valueOf(percent);//已经完成的百分比
        String returnlength = String.format("%.3f",length)+"M";//已经完成数单位:m
        String returntotalLength = String.format("%.3f",totalLength)+"M";//总长度 单位:m
        String returnvelocity = String.format("%.2f",velocity)+"M/s";//传输速度单位:M/s
        String returntime = String.valueOf(time)+"s";//已传输的时间 单位:s
        String returntotalTime = String.format("%.2f",totalTime)+"s";//估计总时间
        String returntimeLeft = String.format("%.2f",timeLeft)+"s";//估计剩余时间
        String returnfileNumber = String.valueOf(status.getItems());
        String str=returnpercent+"||"+returnlength+"||"+returntotalLength+"||"+returnvelocity+"||"+returntime+"||"+returntotalTime +"||"+returntimeLeft+"||"+returnfileNumber;
        
        resp.getWriter().print(str);
    }
    /**
     * 上传数据及保存文件
     */
    protected void doPost(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		response.setContentType("text/html");// 检测是否为多媒体上传
        
    	HttpSession session = request.getSession();
        if (!ServletFileUpload.isMultipartContent(request)) { // 如果不是则停止
           
            PrintWriter writer = response.getWriter();
            session.setAttribute("uploadfail","错误: 页面请求方式错误");
            writer.flush();
            response.sendRedirect("/text2/operator/softwareUpgrade/softwareSignature.jsp");
            return;
        }
        DiskFileItemFactory factory = new DiskFileItemFactory(); // 配置上传参数 
        factory.setSizeThreshold(MEMORY_THRESHOLD);// 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中   
        factory.setRepository(new File(System.getProperty("java.io.tmpdir"))); // 设置临时存储目录
        ServletFileUpload upload = new ServletFileUpload(factory);
       
        /*设置监听器*/
        UploadStatus status = new UploadStatus();
        session.setAttribute("status",status);
        UploadListener listener = new UploadListener(status);
        upload.setProgressListener(listener);
        
        upload.setFileSizeMax(MAX_FILE_SIZE);// 设置最大文件上传值     
        upload.setSizeMax(MAX_REQUEST_SIZE);// 设置最大请求值 (包含文件和表单数据)   
        upload.setHeaderEncoding("UTF-8"); // 中文处理
        
        /*设置生成本地文件夹来存放上传内容*/
        String uploadPath = UPLOAD_DIRECTORY;
        File uploadDir = new File(uploadPath);
        if (!uploadDir.exists()) {// 如果目录不存在则创建
            uploadDir.mkdir();
        }
        try {       
            List<FileItem> formItems = upload.parseRequest(request);// 解析请求的内容提取文件数据
            if (formItems != null && formItems.size() > 0) {
                for (FileItem item : formItems) {// 迭代表单数据
                    if (!item.isFormField()) {// 解析请求表单里为file的内容
                    	String softwareName = item.getName();
                    	long softSize= item.getSize();
                    	if(softSize < 1024)//这里可以认为发行软件大于1KB
                    	{
                            session.setAttribute("uploadfail",softwareName+"文件为空");
                        	response.sendRedirect("/text2/operator/softwareUpgrade/softwareSignature.jsp");
                        	return;
                    	}
                        /*判读文件类型（这部分功能放到前台）
                         * String sname = softwareName.substring(softwareName.lastIndexOf("."));
                        String str=".zip";
                        if(!(sname.equals(str))){
                        	session.setAttribute("uploadfail","上传失败：不是.zip文件");
                        	response.sendRedirect("/text2/operator/softwareUpgrade/softwareSignature.jsp");
                        	return;
                        }*/
                    	DecimalFormat df = new DecimalFormat("#.000"); 
                        session.setAttribute("softSize",df.format((double)softSize/ (1024*1024)) + "M");
                        
                        String filePath = uploadPath + softwareName;
                        File storeFile = new File(filePath);
                        item.write(storeFile);// 保存文件到硬盘
                        
                        session.setAttribute("RA_receive_path",filePath);
                        session.setAttribute("softwareName",softwareName);
                        //session.setAttribute("uploadSoftWareSuccess",softwareName+"文件上传成功!");
                        
                       // writeTxt();
                        callShell("cp /home/keyu0915/桌面/recive/"+softwareName+" /home/keyu0915/桌面/upload/"+softwareName,request, response);

                        }
                    }
                }
            
        } catch (Exception ex) {
        	session.setAttribute("uploadfail","错误信息: " + ex.getMessage());
        	response.sendRedirect("/text2/operator/softwareUpgrade/softwareSignature.jsp");
        	return;
        }
        // 跳转到 message.jsp
        //request.getServletContext().getRequestDispatcher("/ExcelDeal").forward(request, response);
        response.sendRedirect("/text2/operator/softwareUpgrade/softwareUpgradePermission.jsp");
    }

文件上传监听器

/* 《文件上传监听器》
 * 1.由 ProgressListener派生，且只有一个方法接口。
 * 2.update（）由其内部机制调用，会传送三个参数给他
 * 	(1)bytesRead:文件已读取的字节
 * 	(2)contentLength:文件长度
 * 	(3)items:正在上传的第几个文件
 * 		注意：以上可以结合时间计算出文件上传的任何参数
 * 3.这三个参数可以用UploadStatus（javabean）来保留
 * 
 * 	data:2017/12/4
 * 	author:keyu
 * */

package com.myfile;

import org.apache.commons.fileupload.ProgressListener;
public class UploadListener implements ProgressListener {

    private UploadStatus status;

    public UploadListener(UploadStatus status) {
        this.status = status;
    }
    

    public void update(long bytesRead, long contentLength, int items) {
        status.setBytesRead(bytesRead);
        status.setContentLength(contentLength);
        status.setItems(items);
    }
}

保存监听数据的javabean结构

/*《UploadStatus保存监听的数据》
 * 1.这里多加了一个时间值startTime，记录的时间为初始化一个UploadStatus对象的时间，而这个时间往往是初始化文件上传监听器UploadListener之前。所以记录的是文件上传开始的时间
 * 2.特别注意这几个数据的单位：计算其他时记得转换。时间是毫秒（0.001秒）
 * 
 * data:2017/12/4
 * auther:keyu
 * */

package com.myfile;

public class UploadStatus {

    private long bytesRead; // 已经上传的字节数，单位：字节
    private long contentLength; // 所有文件的总长度，单位：字节
    private int items; // 正在上传第几个文件
    private long startTime = System.currentTimeMillis(); // 开始上传的时间，用于计算上传速度等
	public UploadStatus()
	{
		
	}
    public long getBytesRead() {
        return bytesRead;
    }
    public void setBytesRead(long bytesRead) {
        this.bytesRead = bytesRead;
    }
    public long getContentLength() {
        return contentLength;
    }
    public void setContentLength(long contentLength) {
        this.contentLength = contentLength;
    }
    public int getItems() {
        return items;
    }
    public void setItems(int items) {
        this.items = items;
    }
    public long getStartTime() {
        return startTime;
    }
    public void setStartTime(long startTime) {
        this.startTime = startTime;
    }
    

}

keyu0915

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
带有进度条文件上传（UploadFile+AJAX+监听器）

上传页面的jsp部分代码确定上传页面的js代码，利用AJAX定时访问后台程序更新进度条的状态/*################################################进度条显示##################################################### * 1.利用了AJAX定时刷新页面的方法 * date:
复制链接

扫一扫