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

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

阅读更多

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


图一所示,正在上传第一个文件  
 
图一.同步上传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) ...{
 

分享到:
评论

相关推荐

    JAVA上百实例源码以及开源项目

     Java访问权限控制,为Java操作文件、写入文件分配合适的权限,定义写到文件的信息、定义文件,输出到c:/hello.txt、写信息到文件、关闭输出流。 Java绘制图片火焰效果 1个目标文件 摘要:Java源码,图形操作,火焰...

    JAVA上百实例源码以及开源项目源代码

     Java访问权限控制,为Java操作文件、写入文件分配合适的权限,定义写到文件的信息、定义文件,输出到c:/hello.txt、写信息到文件、关闭输出流。 Java绘制图片火焰效果 1个目标文件 摘要:Java源码,图形操作,火焰...

    java开源包4

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

    java开源包11

    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服务器包括...

    java开源包5

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

    java开源包10

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

    java开源包1

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

    java开源包3

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

    java开源包2

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

    java开源包7

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

    Java资源包01

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

    asp.net知识库

    帮助解决网页和JS文件中的中文编码问题的小工具 慎用const关键字 装箱,拆箱以及反射 动态调用对象的属性和方法——性能和灵活性兼备的方法 消除由try/catch语句带来的warning 微软的应试题完整版(附答案) 一个...

Global site tag (gtag.js) - Google Analytics