当前位置:  编程技术>java/j2ee

利用jsp+Extjs实现动态显示文件上传进度

    来源: 互联网  发布时间:2014-10-20

    本文导语:  需求来源是这样的:上传一个很大的excel文件到server, server会解析这个excel, 然后一条一条的插入到数据库,整个过程要耗费很长时间,因此当用户点击上传之后,需要显示一个进度条,并且能够根据后台的接收的数据量和处...

需求来源是这样的:上传一个很大的excel文件到server, server会解析这个excel, 然后一条一条的插入到数据库,整个过程要耗费很长时间,因此当用户点击上传之后,需要显示一个进度条,并且能够根据后台的接收的数据量和处理的进度及时更新进度条。

分析:后台需要两个组件,uploadController.jsp用来接收并且处理数据,它会动态的把进度信息放到session,另一个组件processController.jsp用来更新进度条;当用户点“上传”之后,form被提交给uploadController.jsp,同时用js启动一个ajax请求到processController.jsp,ajax用获得的进度百分比更新进度条的显示进度,而且这个过程每秒重复一次;这就是本例的基本工作原理。

现在的问题是server接收数据的时候怎么知道接收的数据占总数据的多少? 如果我们从头自己写一个文件上传组件,那这个问题很好解决,关键是很多时候我们都是用的成熟的组件,比如apache commons fileupload; 比较幸运的是,apache早就想到了这个问题,所以预留了接口可以用来获取接收数据的百分比;因此我就用apache commons fileupload来接收上传文件。

uploadController.jsp:

代码如下:




processController.jsp:
代码如下:


=1){
    //当processExcelPercentage>1代表excel分析完毕。
    request.getSession().removeAttribute("uploadPercentage");
    request.getSession().removeAttribute("processExcelPercentage");
    //客户端判断是否结束的标志
    finished = "true";
   }
  }
  out.write("{success:true, msg: '"+msg+"', percentage:'" + processExcelPercentage + "', finished: "+ finished +"}");
  //注意返回的数据,success代表状态
  //percentage是百分比
  //finished代表整个过程是否结束。
 }
 out.flush();
%>

表单页面upload.html:
代码如下:


 
  
  File Upload Field Example
  
  
  
  

 
 
  sunxing007
  

 
 
var fm = new Ext.FormPanel({
 title: '上传excel文件',
 url:'uploadController.jsp?t=' + new Date(),
 autoScroll:true,
 applyTo: 'form',
 height: 120,
 width: 500,
 frame:false,
 fileUpload: true,
 defaultType:'textfield',
 labelWidth:200,
 items:[{
  xtype:'field',
  fieldLabel:'请选择要上传的Excel文件 ',
  allowBlank:false,
  inputType:'file',
  name:'file'
 }],
 buttons: [{
  text: '开始上传',
  handler: function(){
   //点击'开始上传'之后,将由这个function来处理。
      if(fm.form.isValid()){//验证form, 本例略掉了
      //显示进度条
    Ext.MessageBox.show({
        title: '正在上传文件',
        //msg: 'Processing...',
        width:240,
        progress:true,
        closable:false,
        buttons:{cancel:'Cancel'}
    });
    //form提交
        fm.getForm().submit();
        //设置一个定时器,每500毫秒向processController发送一次ajax请求
      var i = 0;
      var timer = setInterval(function(){
        //请求事例
         Ext.Ajax.request({
         //下面的url的写法很关键,我为了这个调试了好半天
         //以后凡是在ajax的请求的url上面都要带上日期戳,
         //否则极有可能每次出现的数据都是一样的,
         //这和浏览器缓存有关
      url: 'processController.jsp?t=' + new Date(),
      method: 'get',
      //处理ajax的返回数据
      success: function(response, options){
       status = response.responseText + " " + i++;
       var obj = Ext.util.JSON.decode(response.responseText);
       if(obj.success!=false){
        if(obj.finished){
         clearInterval(timer); 
         //status = response.responseText;
         Ext.MessageBox.updateProgress(1, 'finished', 'finished');
         Ext.MessageBox.hide();
        }
        else{
         Ext.MessageBox.updateProgress(obj.percentage, obj.msg); 
        }
       }
      },
      failure: function(){
       clearInterval(timer);
       Ext.Msg.alert('错误', '发生错误了。');
      }
     });
      }, 500);

      }
      else{
       Ext.Msg.alert("消息","请先选择Excel文件再上传.");
      }
  }
 }]
});



把这三个文件放到tomcat/webapps/ROOT/, 同时把ext的主要文件也放到这里,启动tomcat即可测试:http://localhost:8080/upload.html

我的资源里面有完整的示例文件:点击下载, 下载zip文件之后解压到tomcat/webapps/ROOT/即可测试。

最后需要特别提醒,因为用到了apache 的fileUpload组件,因此,需要把common-fileupload.jar放到ROOT/WEB-INF/lib下。
 


    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • linux c下利用srand和rand函数生成随机字符串
  • 请问:Linux下用C编程计算CPU利用率和内存利用率?
  • linux下利用(cat,strings,head,sed)命令生成随机字符串
  • 在2003下利用vmware安装了linux,又利用host-only方式上了网,问题如下多谢指点!!!
  • Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
  • 大虾 紧急求助!!!!如何求得当前机子的处理器利用率和内存利用率?
  • 如何利用libpcap和Python嗅探数据包
  • 如何利用Bash脚本(利用awksedgrepwc等)来自动修改配置文件
  • windows堆栈溢出利用的七种方式
  • 求RADIUS的动态分配IP的问题(利用IPPOOL)
  • iowait和cpu利用率的权衡问题
  • Qt中利用槽如何来传递参数
  • 浏览器漏洞利用框架 BeEF
  • 怎么样利用Socket进行Java网络编程
  • 请问如何编程获得CPU利用率?(空)
  • 如何利用Linux安装盘制作启动盘?
  • 谁知道linux/unix下利用Schema读取校验xml的开源代码,给一个链接,谢谢!
  • oracle iis7站长之家
  • CPU、内存、数据库利用率监控
  • 怎样利用u-boot烧写??
  • 根目录 / 文件利用过高, 啥办法?


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3