js+java 带进度条的文件上传-同步+异步

最新推荐文章于 2024-07-13 03:34:44 发布

一枪尽骚丶魂

最新推荐文章于 2024-07-13 03:34:44 发布

阅读量2.8k

点赞数

分类专栏： HTML/JS/CSS Java

Java 同时被 2 个专栏收录

215 篇文章

订阅专栏

HTML/JS/CSS

64 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的文件上传系统，该系统能够处理多种文件类型，并通过Ajax技术实时更新上传进度。此外，还提供了一个Java Servlet示例用于处理文件的实际上传过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自：http://blog.sina.com.cn/s/blog_6a5fb6e10100l60o.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>一亩三分-上传</title>
<SCRIPT src="/1m3f/Common_Development/Global.js"></SCRIPT>
<SCRIPT src="/1m3f/Common_Development/HttpSubmit.js"></SCRIPT>
<SCRIPT src="/1m3f/Common_Development/Tools.js"></SCRIPT>
<script language="javascript">...

var totalByte=[0,0];
var uploadedByte=[0,0];
var halder=[];
var uploadForms=[];
//var totalBar=[];
var goBar=[];
var rightfulExts=...{};
rightfulExts.rar="";
rightfulExts.jpg="";
rightfulExts.exe="";
rightfulExts.iso="";
rightfulExts.gif="";
rightfulExts.ini="";
rightfulExts.rmvb="";
rightfulExts.pdf="";
var formCount=-2;

function getTotalByte(c)...{
    totalByte[c]=getSession("totalByte"+c);
    if(totalByte[c]!=0&&totalByte[c]!=false)...{
        window.clearInterval(halder[c]);
        var t=Math.ceil(Math.log(totalByte[c]));
        halder[c]=window.setInterval("getUploadedByte("+c+");",t*t);
    }
}

function getUploadedByte(c)...{
    uploadedByte[c]=getSession("uploadedByte"+c);
    var percent=Math.floor((uploadedByte[c]/totalByte[c])*100);
    //totalBar[c].innerHTML=percent+"% 共"+Math.floor(totalByte[c]/(1024*1024))+"M";
    goBar[c].style.width=percent+"%";
    if(totalByte[c]==uploadedByte[c])...{
        window.clearInterval(halder[c]);
    }
}

function windowOnload()...{
    uploadForms=[document.forms["uploadForm0"],document.forms["uploadForm1"]];
    //totalBar=[$("totalCountainer0"),$("totalCountainer1")];
    goBar=[$("uploadedCountainer0"),$("uploadedCountainer1")];
}
function windowInit()...{
    $("upload").onclick=upload;
}
</script>

</head>
<body onload="windowInit();windowOnload();">
    <iframe onload="upload()" src="about:blank" name="fileUploadFrame" style="display:none;" >
    </iframe>
    <form name="uploadForm0" action=.upload method="post" enctype="multipart/form-data" target="fileUploadFrame">
        <table>
            <tr>
                <td>
                    文件1
                </td>
                <td>
                    <input type="hidden" name="curCount"/>
                    <input type="hidden" name="savePath" value="images/" />
                    <input type="hidden" name="saveName" />
                    <input type="hidden" name="canOverWrite" value="true" />
                    <input type="file" name="fileData" />
                </td>
            </tr>
        </table>
    </form>
    <div id="totalCountainer0" style="width:500px;border-style:solid;border-color:#4062E8">
        <div id="uploadedCountainer0" style="background-image:url(/1m3f/images/downloadbar.png);width:0%;"></div>
    </div>


    <form name="uploadForm1" action=.upload method="post" enctype="multipart/form-data" target="fileUploadFrame">
        <table>
            <tr>
                <td>
                    文件2
                </td>
                <td>
                    <input type="hidden" name="curCount" value="2" />
                    <input type="hidden" name="savePath" value="images/" />
                    <input type="hidden" name="saveName" />
                    <input type="hidden" name="canOverWrite" value="true" />
                    <input type="file" name="fileData" />
                </td>
            </tr>
        </table>
    </form>
    <div id="totalCountainer1" style="width:500px;border-style:solid;border-color:#4062E8">
        <div id="uploadedCountainer1" style="background-image:url(/1m3f/images/downloadbar.png);width:0%;"></div>
    </div>
    <input id="upload" type="button" value="上传" />
</body>
</html>

===============================================================================================

package test;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import tools.FileUpload;

import common.Global;

public class UploadAction extends HttpServlet ...{

    private static final String ROOT_PATH = Global.getRootPath();
    private static final String ENCODING = Global.getEncoding();
    static final long MAX_SIZE = Global.getMaxSize();

public void doPost(HttpServletRequest request, HttpServletResponse response) ...{

        PrintWriter out = null;
        try ...{
            // 设置字符集编码
            response.setContentType("text/html;charset=" + ENCODING);
            request.setCharacterEncoding(ENCODING);
            out = response.getWriter();
            FileUpload f = new FileUpload(request);
            f.setMaxSize(MAX_SIZE);
            f.setRootPath(ROOT_PATH);
            long start = System.currentTimeMillis();
            boolean bf = f.uploade();
            long end = System.currentTimeMillis();
            System.out.println("用时:" + (end - start));
            if (bf) ...{
                out.print(Global.OK + Global.BLC_X_CODE);
                out.print(f.getUserInfo());
                out.print(Global.BLC_X_CODE);
                out.print(f.getSysInfo());
            } else ...{
                out.print(Global.NO_OK + Global.BLC_X_CODE);
                out.print(f.getUserInfo());
                out.print(Global.BLC_X_CODE);
                out.print(f.getSysInfo());
            }
        } catch (IOException e) ...{
            e.printStackTrace();
        }
    }
}