`
xiangxingchina
  • 浏览: 520158 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

JavaEXTC#C++C 
阅读更多

同步上传： 多个文件上传时，按顺序依次上传，后面的必须等待前面的上传完毕才能开始


图一所示，正在上传第一个文件  
 
图一.同步上传1

图二所示，正在上传第二个文件  
 
图二.同步上传2


异步上传： 多个文件同时开始上传

 
图三.异步上传
同步上传前台代码：  

<! 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  upload() ... {
    formCount ++ ;
     if (formCount < 0 || formCount > 1 ) ... {
         return   false ;
    }
    
     var  ext = uploadForms[formCount].fileData.value.split( " . " ).pop().toLowerCase();
     if ( ! (ext  in  rightfulExts) && ext != "" ) ... {
        alert( " 第 " + (formCount + 1 ) + " 个文件类型不匹配！ " );
         return   false ;
    }
     if (ext != "" ) ... {
        uploadForms[formCount].saveName.value = getNewId( " 13 " , " fileUpload13 " ) + " . " + ext;
    }
    
    uploadForms[formCount].curCount.value = formCount;
    uploadForms[formCount].submit();
    
    totalByte[formCount] = 0 ;
    halder[formCount] = window.setInterval( " getTotalByte( " + formCount + " ); " , 1 );
}

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 >

异步上传前台代码：
<!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="";

function upload()...{
    var l=uploadForms.length;
    for(var i=0;i<l;i++)...{
        var ext=uploadForms[i].fileData.value.split(".").pop().toLowerCase();
        if(!(ext in rightfulExts)&&ext!="")...{
            alert("第"+(i+1)+"个文件类型不匹配！");
            return false;
        }
        if(ext!="")...{
            uploadForms[i].saveName.value=getNewId("13","fileUpload13")+"."+ext;
        uploadForms[i].curCount.value=i;
        }
    }
   
    uploadForms[0].submit();
    totalByte[0]=0;
    halder[0]=window.setInterval("getTotalByte("+0+");",1);
   
    uploadForms[1].submit();
    totalByte[1]=0;
    halder[1]=window.setInterval("getTotalByte("+1+");",1);
}

function getTotalByte(c)...{
    totalByte[c]=getSession("totalByte"+c);
    if(totalByte[c]!=0&&totalByte[c]!=false)...{
        //totalBar[c].innerHTML=totalByte[c];
        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);
    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 src="about:blank" name="fileUploadFrame0" style="display:none;" >
    </iframe>
    <form name="uploadForm0" action=.upload method="post" enctype="multipart/form-data" target="fileUploadFrame0">
        <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>
   
   
    <iframe src="about:blank" name="fileUploadFrame1" style="display:none;" >
    </iframe>
    <form name="uploadForm1" action=.upload method="post" enctype="multipart/form-data" target="fileUploadFrame1">
        <table>
            <tr>
                <td>
                    文件2
                </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="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>

上传后台servlet代码：
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) ...{
 

分享到：
| JIRA安装和破解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    带进度条的文件上传下载组件（JAVA)

    这个名为“带进度条的文件上传下载组件（JAVA）”的项目，显然聚焦于提供一个用户友好的交互体验，通过显示进度条来增强用户体验，使用户能够清晰地看到文件上传或下载的进度。下面我们将深入探讨这一组件涉及的主要...

    struts 单文件上传和多文件上传带进度条

    当用户选择文件后，我们可以在前端实时更新进度条，同时发送异步请求进行文件上传。服务器端则需要支持接收并处理这种非同步请求。 以下是一个简单的JavaScript示例，使用jQuery和jQuery UI Progressbar： ```...

    struts2带进度条的异步上传

    在Web开发中，文件上传是常见的需求，而实现带进度条的异步上传则能提供更好的用户体验。这个【标题】"struts2带进度条的异步上传"指的是使用Struts2框架，结合JSON和jQuery技术来实现在用户界面上展示文件上传进度...

    异步类下载 带进度条

    在IT行业中，异步类下载和带进度条的实现是一项常见的需求，特别是在开发涉及大量文件下载的Web应用或移动应用时。这个主题涉及到的技术主要包括多线程、异步编程、文件处理以及用户界面的更新。以下是对这个话题的...

    struts2+easyui+uploadfye文件上传

    然后，`Uploadify` 是一个JavaScript和Flash混合的文件上传插件，它支持异步上传，即在不刷新页面的情况下上传文件，提供了良好的用户体验。Uploadify不仅支持多文件选择，还允许自定义上传进度条，这正是描述中提到...

    异步刷新进度条.rar

    "异步刷新进度条"指的是在后台线程执行耗时操作时，通过非阻塞的方式更新界面上的进度条，以提供更好的用户体验。这是因为直接在主线程（如Android的UI线程或JavaScript的事件循环）中进行耗时操作会导致应用卡顿，...

    struts2实现多文件异步上传

    在Struts2中实现多文件异步上传是一个常见的需求，它能够提高用户体验，因为用户可以在不等待所有文件上传完成的情况下继续浏览其他页面。下面将详细解释如何在Struts2中实现这一功能。 首先，我们需要理解异步上传...

    jsloader 异步加载js文件

    **JSLoader：异步加载JavaScript文件** 在网页开发中，JavaScript文件的加载是网页渲染过程中的关键步骤。大型应用往往包含多个JS文件，这可能导致页面加载速度变慢，影响用户体验。为了解决这个问题，开发者引入了...

    js可拖拽百分比进度条

    【标题】"js可拖拽百分比进度条"是一个基于JavaScript实现的交互式进度条组件，它允许用户通过拖动来调整进度条的值，显示为百分比形式。这种功能在许多应用程序中都有用，例如文件上传进度指示、设置配置等场景。 ...

    在jsp中给flv格式的文件增加控制进度条

    为了实现进度条与实际视频播放的同步，JW Player提供了一些事件监听方法，如`onPlay`, `onPause`, `onTime`等。你可以利用这些事件更新服务器端的状态，或者根据服务器的反馈更新客户端的进度条。 4. **服务器端...

    ssm实现多文件上传实时更新进度信息

    AJAX（Asynchronous JavaScript and XML）允许我们在不刷新整个页面的情况下与服务器进行异步通信，非常适合用来传递文件上传进度。 在前端，我们可以创建一个表单，使用HTML5的`&lt;input type="file" multiple&gt;`来...

    进度条的Demo

    在IT行业中，进度条是一种非常常见的用户界面元素，它用于显示任务执行的进度，无论是数据加载、文件上传还是计算过程，都可以通过进度条给予用户反馈，让用户了解操作的状态。本Demo，"进度条的Demo"，是专为快速...

    javafileUpload文件上传

    这需要利用JavaScript和AJAX技术，在前端实时更新上传进度，并与后端通过异步通信同步信息。 综上所述，Java文件上传涉及HTTP协议、Servlet API、Commons FileUpload库以及安全性等多个方面。开发者需要理解这些...

    执行异步操作并显示操作进度.rar

    Python的`tqdm`库可以方便地创建带进度条的迭代器，适用于各种异步场景： ```python from tqdm import tqdm for item in tqdm(async_iterable, total=total_items): # 异步操作 ``` 在Java中，使用`java.nio.file...

    进度条

    5. **UI库和框架**：不同的开发平台和框架，如Java的Swing或Android，C#的WPF或WinForms，JavaScript的React或Vue，都有自己的组件和API来创建进度条。开发者需要熟悉所选平台的UI库，知道如何配置和使用进度条组件...

    java开源包4

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    java开源包101

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    java开源包6

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    java开源包9

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

    java开源包8

    ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...

Magicbox
Global site tag (gtag.js) - Google Analytics