cos + ajax 文件上传

最新推荐文章于 2022-03-25 11:51:10 发布

iteye_4245

最新推荐文章于 2022-03-25 11:51:10 发布

阅读量121

点赞数

分类专栏： IT技术文章标签： Ajax JSP JavaScript Go Microsoft ViewUI

IT技术专栏收录该内容

79 篇文章

订阅专栏

本文介绍了一个基于Cos的文件上传组件的优化实现。该组件能够限制上传文件类型，并提供详细的上传进度报告，包括文件名、上传进度百分比、传输速度、预计总时间和剩余时间等。通过重写IO流提高效率。

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

声明：上传核心代码采用cos 此版本属于自己改装。版权归 天星网

        近两天项目需要改版上传组件，我仔细研究了一下各上传组件的源码。cos不论从速度还是文件大小方面保持着良好的特性。

         经过我改装后的cos可以限制上传文件类型，返回文件流报告（ajax使用），假设读者已经熟悉cos和ajax。可以返回上传文件名称，完成百分比，文件传输速度，需要总时间，剩余时间。
         以下是部分代码：

文件1
<%
   //创建此目录保存文件
   String saveDirectory = "testfile";
   //每个文件最大100m,最多3个文件,所以...
   int maxPostSize = 3 * 100 * 1024 * 1024;
   //命名规则
   FileRenamePolicy policy = new DateFileRenamePolicy();

   HttpFileUPload fileUpload = new HttpFileUPload();
   //编码
   fileUpload.setEncoding("UTF-8");
   fileUpload.setMaxPostSize(maxPostSize);
   fileUpload.setPolicy(policy);
   fileUpload.setSaveDirectory(saveDirectory);
   //允许上传文件类型
   fileUpload.setAllowFiles("jpg,gif,mp3,rmvb,wmv,ghs,reg");
   //输出反馈信息
   try{
    Enumeration files = fileUpload.parseRequest(request);
    while (files.hasMoreElements()) {
     String name = (String) files.nextElement();
     File file = fileUpload.getFile(name);
     if (file != null) {
      out.println("上传的文件:" + file.getAbsolutePath()+" ");
      out.println("<hr>");
     }
    }
   }catch(Exception e){
    out.println(e.toString()+"<br>");
    out.println("<input type='button' value='重新上传' onClick=\""+"location='index.jsp'\""+">");
   }finally{
    //清理session
    Thread.sleep(1000);
    fileUpload.dispose();
   }
  %>

文件2
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>文件上传</title>
</head>
<body>
  <form name="uploadForm" id="uploadForm" method="post" enctype="multipart/form-data" action="upload.jsp">
   <P>
    <INPUT name="file1" type="file">
   </P>
   <P align="left">
    <INPUT name="file2" type="file">
   </P>
   <p>
    <INPUT name="file3" type="file">
   </p>
   <p>
   </p>
   <p id="show">
   </p>
   <p align="left">
    <input type="button" name="Submit" id="upload" value="上传" onClick="go();">
   </p>
  </form>
</body>
</html>
<script type="text/javascript">
function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        } else {
        }
    }
}
function go() {
    document.uploadForm.submit();
    createXMLHttpRequest();
    var url = "ProgressBarServlet";
    var button = document.getElementById("upload");
    button.disabled = true;
    xmlHttp.open("GET", url, true);
    xmlHttp.onreadystatechange = goCallback;
    xmlHttp.send(null);

}
function goCallback() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            setTimeout("pollServer()", 2000);
        }
    }
}
function pollServer() {
    createXMLHttpRequest();
    var url = "ProgressBarServlet";
    xmlHttp.open("GET", url, true);
    xmlHttp.onreadystatechange = pollCallback;
    xmlHttp.send(null);
}
function pollCallback() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var completePercent = xmlHttp.responseXML.getElementsByTagName("completePercent")[0].firstChild.data;
            //百分比
            var uploadSpeedKB = xmlHttp.responseXML.getElementsByTagName("uploadSpeedKB")[0].firstChild.data;
            //传输速度
            var remainTimeHMS = xmlHttp.responseXML.getElementsByTagName("remainTimeHMS")[0].firstChild.data;
            //剩余时间
            var totalTimeHMS = xmlHttp.responseXML.getElementsByTagName("totalTimeHMS")[0].firstChild.data;
            //总时间
            var fileName = xmlHttp.responseXML.getElementsByTagName("fileName")[0].firstChild.data;
            if (completePercent < 100) {
                document.getElementById("show").innerHTML =
                fileName + "\uff1b" + completePercent
                + "% <br>\u901f\u5ea6\uff1a" + uploadSpeedKB +"KB"
                + "\uff1b<br>\u5269\u4f59\u65f6\u95f4" + remainTimeHMS
                + "\uff1b<br>\u9700\u8981\uff1a" + totalTimeHMS;
                setTimeout("pollServer()", 1000);
            } else {
                document.getElementById("show").innerHTML = "\u5b8c\u6210";
            }
        }
    }
}
</script>

      cos的优越性得意于他对IO流的重写。BufferedServletInputStream，LimitedServletInputStream，PartInputStream 经过几次对原始流的优化。详细信息请查看cos源码。

      周行制作   jwebee@163.com
       工程文件下载