`
zhouxing
  • 浏览: 207307 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

cos + ajax 文件上传

阅读更多
声明: 上传核心代码采用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 
       工程文件下载
分享到:
评论

相关推荐

    cos+ajax

    在IT行业中,"cos+ajax"的组合通常指的是腾讯云对象存储(Cloud Object Storage, COS)与Ajax技术结合实现的文件上传进度条功能。这里,我们详细探讨一下这两个概念以及如何将它们应用于文件上传。 首先,腾讯云...

    自制jquery+SWFUpload+COS 多文件上传组件

    标题中的“自制jquery+SWFUpload+COS 多文件上传组件”揭示了这个项目的核心:一个结合了jQuery、SWFUpload和腾讯云对象存储(COS)服务的多文件上传工具。这个组件允许用户在网页上批量上传文件,并将它们存储到...

    jquery+SWFUpload+COS上传组件的使用 兼容ie6

    总结来说,"jquery+SWFUpload+COS上传组件的使用 兼容ie6"这个主题涵盖了前端文件上传的多个重要知识点,包括jQuery的DOM操作、SWFUpload的多文件上传机制、以及腾讯云对象存储的集成。这个解决方案虽然针对的是IE6...

    jquery+SWFUpload+COS上传组件的使用.doc

    jQuery + SWFUpload + COS(腾讯云对象存储)上传组件提供了一种高效、友好的文件上传解决方案。本文档旨在详细介绍如何使用这个组合实现高效的文件上传功能。 **1. 组件介绍** jQuery是一个广泛使用的JavaScript...

    springboot+vue实现超大文件分片极速上传与下载完整前后端源码

    在这个项目中,Vue.js被用来创建前端界面,展示文件上传和下载进度,处理用户交互,并通过Ajax与后端进行数据通信。 文件分片技术是处理大文件的关键。当上传或下载文件时,系统会将文件分割成多个小块,每个块独立...

    实现各种类型文件的多文件上传

    该组件支持Ajax异步上传,提供了进度条显示,以及错误提示等功能,使得用户能实时了解文件上传的状态。 SpringBoot是基于Spring框架的快速开发工具,它简化了Spring应用的初始搭建以及开发过程。在处理文件上传时,...

    Thinkphp3.2文件上传

    在IT行业中,文件上传和下载是常见的Web应用功能,尤其在内容管理系统、论坛或云存储服务等场景下不可或缺。ThinkPHP是一个广泛使用的PHP框架,它提供了便捷的开发工具和丰富的功能,使得开发者能够快速构建高效稳定...

    SpringMVC上传图片文件到 腾讯云【2018年最新版】【JavaWeb】

    总结,这个项目涵盖了SpringMVC与前端Ajax交互、文件上传处理以及腾讯云COS服务的集成。通过这个过程,开发者可以学习到如何在JavaWeb应用中实现高效、可靠的文件上传功能,并将这些文件安全地存储在云端。

    java jquery_SWFUpload_COS上传组件的使用

    总的来说,`jQuery`、`SWFUpload`和`COS`的组合为开发者提供了一个跨平台、功能丰富的文件上传解决方案,尤其是在需要处理大量文件或大文件上传的场景下。然而,随着技术的发展,开发者也需要不断学习和适应新的工具...

    NodeJS本地上传文件至服务器

    在Node.js环境中,将本地文件上传到服务器是一个常见的任务,主要应用于文件共享、数据备份、内容发布等场景。本文将详细讲解如何使用Node.js实现这一功能。 首先,我们需要理解Node.js的基本概念。Node.js是一个...

    谈谈前端关于文件上传下载那些事资料.zip

    在前端开发中,文件上传和下载是常见的功能需求,尤其在现代互联网应用中,用户交互往往涉及文件的处理。本文将深入探讨前端实现文件上传和下载的技术细节,并结合JavaScript的经典实例,提供一些实用的开发策略。 ...

    Struts2文件上传和下载教程

    - **COS (Commons Open Source)**: O'Reilly公司的开源框架,也可以用于文件上传。 **1.4 Struts2与文件上传** - **原理**: Struts2自身不直接处理`multipart/form-data`请求,而是调用第三方组件(如Commons-...

    jquery-OCUpload-文件上传实现

    《jQuery OCUpload 文件上传组件详解及实践》 在Web开发中,文件上传功能是不可或缺的一部分。jQuery OCUpload是一款高效、易用的文件上传组件,它为开发者提供了丰富的自定义选项和出色的用户体验。本文将深入探讨...

    php 多图片上传

    2. 文件类型检查:验证上传的文件是预期的类型(如图片),防止恶意文件上传。 3. 文件大小限制:限制上传文件的大小,避免服务器资源被消耗殆尽。 4. 上传目录权限:确保上传目录没有执行权限,防止恶意代码被执行...

    JSP源码,图片上传,进度条,JSP图片上传实例

    服务器端接收到请求后,使用cos.jar提供的API处理文件上传,同时计算已上传的字节数和总字节数,将这些信息通过响应头或者JSON格式回传给客户端。客户端接收到这些信息后,更新进度条的宽度或填充状态,从而让用户...

    cos-js-sdk-v5:腾讯云 COS JS SDK(XML API)

    cos-js-sdk-v5腾讯云 COS JS SDK()Get started一、前期准备首先,JS SDK 需要浏览器支持基本的 HTML5 特性,以便支持 ajax 上传文件和计算文件 md5 值。到 创建存储桶,得到 Bucket(存储桶名称) 和到 获取您的...

    FastAdmin_Upload:FastAdmin 前台文件上传RCE

    《FastAdmin前台文件上传RCE详解及Python利用方法》 FastAdmin是一款基于ThinkPHP5框架开发的后台管理系统,因其简洁易用的界面和强大的功能深受开发者喜爱。然而,任何系统都可能存在安全漏洞,FastAdmin也不例外...

    类似于163邮箱的附件上传

    在开发Web应用时,我们经常需要实现类似163邮箱的附件上传和下载功能。...例如,使用WebSocket进行实时通信,实现文件上传的即时反馈,或者集成第三方库如jQuery File Upload、Dropzone.js等来简化开发流程。

    tinymce附件上传插件

    在文件“fileUpload.jsp”中,我们可以看到处理文件上传的核心逻辑。通常,这个文件会接收到前端通过AJAX提交的文件数据,包括文件的二进制内容和元信息(如文件名、类型等)。然后,它会执行文件的存储操作,这可能...

Global site tag (gtag.js) - Google Analytics