文档章节

extjs+springmvc上传文件显示进度条

hold_the_line
 hold_the_line
发布于 2014/04/10 09:35
字数 871
阅读 1125
收藏 4
点赞 1
评论 0

    SpringMVC上传文件用的是CommonsMultipartResolver配置在xx-servlet.xml中,当上传大文件时,向后台发送请求,此时的request被spring解析为DefaultMultipartHttpServletRequest。

@RequestMapping(value = "/uploadVideo1", method = RequestMethod.POST)
    public void uploadVideo1(@RequestParam MultipartFile file,HttpServletRequest request, HttpServletResponse response) throws Exception {
        String contextPath = request.getSession().getServletContext().getRealPath(Common.uploadPath);
        this.fileUpload(contextPath, file, response);
    }
private void fileUpload(String contextPath, MultipartFile file, HttpServletResponse response){
        File filepath = new File(contextPath);
        logger.info("上传文件名[" + file.getName() + "],文件大小[" + file.getSize() + "]");
        if (!filepath.exists()) {
            filepath.mkdir();
            logger.info("[" + filepath.getAbsolutePath() + "]创建成功!");
        }
        try {
            int index = file.getOriginalFilename().lastIndexOf(".");
            long timestamp = System.currentTimeMillis();
            String orgFileName = timestamp + file.getOriginalFilename().substring(index);
            File orgFile = new File(contextPath, orgFileName);
            file.transferTo(orgFile);
            logger.info("[" + orgFileName + "]保存成功!");
            /*保存文件对象信息,自定义的类*/
            FileManager fileManager = new FileManager();
            String date = StrUtils.formateDate("yyyy-MM-dd HH:mm:ss", new Date());
            fileManager.setFname(Common.CENTER_WEBSITE + "/" + Common.uploadPath + "/" + orgFileName);
            fileManager.setDate(date);
            fileManagerBiz.saveFileManager(fileManager);
            logger.info("[" + orgFileName + "]上传成功!");
            super.outJson(response, new JSONResult(true, Common.CENTER_WEBSITE + "/" + Common.uploadPath + "/" + orgFile.getName()));
        } catch (Exception e) {
            logger.info("Exception异常:" + e.getLocalizedMessage());
            super.outJson(response, new JSONResult(false, "上传失败"));
        }
    }

    需要一个监听器去监听文件的上传进度.因此写一个类实现ProgressListener(在session中保存文件上传进度实体类).

public class MyProgressListener implements ProgressListener {
    
    private HttpSession session;  
    
    public MyProgressListener() {
        
    }
    public MyProgressListener(HttpSession session) {
        this.session = session;
        ProgressEntity ps = new ProgressEntity();
        session.setAttribute("upload_ps", ps);
    }

    public void setSession(HttpSession session){
        this.session = session;
    }
    
    @Override
    public void update(long pBytesRead, long pContentLength, int pItems) {
        ProgressEntity ps = (ProgressEntity) session.getAttribute("upload_ps");
        ps.setpBytesRead(pBytesRead);
        ps.setpContentLength(pContentLength);
        ps.setpItems(pItems);    
        //更新
        session.setAttribute("upload_ps", ps);
        
    }

    文件上传进度写了个实体类封装ProgressEntity

public class ProgressEntity {
    private long pBytesRead = 0L;   //到目前为止读取文件的比特数 
    private long pContentLength = 0L;    //文件总大小 
    private int pItems;                //目前正在读取第几个文件 
    public long getpBytesRead() {
        return pBytesRead;
    }
    public void setpBytesRead(long pBytesRead) {
        this.pBytesRead = pBytesRead;
    }
    public long getpContentLength() {
        return pContentLength;
    }
    public void setpContentLength(long pContentLength) {
        this.pContentLength = pContentLength;
    }
    public int getpItems() {
        return pItems;
    }
    public void setpItems(int pItems) {
        this.pItems = pItems;
    }
    @Override
    public String toString() {
        return "ProgressEntity [pBytesRead=" + pBytesRead + ", pContentLength="
                + pContentLength + ", pItems=" + pItems + "]";
    }

  要实现文件的监听,需要重写spring的CommonsMultipartResolver类

public class CustomMultipartResolver extends CommonsMultipartResolver {
    
    private HttpServletRequest request;
    protected FileUpload newFileUpload(FileItemFactory fileItemFactory) {
        ServletFileUpload upload = new ServletFileUpload(fileItemFactory);
        if (request != null) {
            HttpSession session = request.getSession();
            MyProgressListener uploadProgressListener = new MyProgressListener(session);
            upload.setProgressListener(uploadProgressListener);
        }
        return upload;
    }
    
    public MultipartHttpServletRequest resolveMultipart(
            HttpServletRequest request) throws MultipartException {
        this.request = request;// 获取到request,要用到session
        return super.resolveMultipart(request);
    }
    
    @Override
    public MultipartParsingResult parseRequest(HttpServletRequest request)
            throws MultipartException {
        String encoding = determineEncoding(request);
        FileUpload fileUpload = prepareFileUpload(encoding);
        //设置监听器
        MyProgressListener progressListener = new MyProgressListener(request.getSession());
        fileUpload.setProgressListener(progressListener);
        try {
            List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);
            return parseFileItems(fileItems, encoding);
        }
        catch (FileUploadBase.SizeLimitExceededException ex) {
            throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex);
        }
        catch (FileUploadException ex) {
            throw new MultipartException("Could not parse multipart servlet request", ex);
        }
    }

}

    因为是用extjs4.2写的一个简单的请求。

var p = Ext.Msg.show({
            title:'上传进度',
            progress:true,
            width:300
        });
        p.updateProgress(0,'0%');
        /*mask.show();*/
        Eform.getForm().submit({
            url : 'public/uploadVideo1?t='+new Date(),
            clientValidation: true,
            success: function(form, action) {
                if (action.result.success) {
                   field.setValue(action.result.message);
                   form.reset();
                   Ewindow.hide();
                   p.hide();
                } else {
                    Ext.Msg.alert('提示','<p align="center">'+action.result.message+'</p>');
                }
                Ewindow.hide();
            },
            failure: function(form, action) {
                switch (action.failureType) {
                    case Ext.form.action.Action.CLIENT_INVALID:
                        break;
                    case Ext.form.action.Action.CONNECT_FAILURE:
                        Ext.Msg.alert('提示', '<p align="center">通信失败,请稍后再试或联系管理员</p>');
                        break;
                    case Ext.form.action.Action.SERVER_INVALID:
                       Ext.Msg.alert('提示', '<p align="center">' + 
                           action.result.message + '</p>');
               }
               /*mask.hide();*/
               Ewindow.hide();
            }
        });
        var percent;//上传进度百分比
        //定时器每隔100毫秒请求得到session中的进度
        var timer = setInterval(function(){
            Ext.Ajax.request({
                url:'public/getProgress?t='+new Date(),
                method:'get',
                success: function(response) {
                     var result = Ext.decode(response.responseText);
                     console.log(result);
                     if(result.success){
                         percent = result.message;
                         p.updateProgress(percent,percent*100+'%');
                         if(percent >= 1.0){//进度为100%以后,取消定时器
                            clearInterval(timer);
                        }
                     }else{
                         Ext.Msg.alert('提示',result.message);
                     }
                 }
            });
        },100);
    }

    请求的方法只是简单的取出session中的进度。

/**
     * 前端每隔固定毫秒数请求后台得到session当中保存的上传进度
     * @param request
     * @param response
     */
    @RequestMapping(value = "/getProgress", method = RequestMethod.GET)
    public void getProgress(HttpServletRequest request, HttpServletResponse response){
        ProgressEntity ps = (ProgressEntity)request.getSession().getAttribute("upload_ps");
        Double percent = 0d;
        if(ps.getpContentLength() != 0L){
            percent = (double)ps.getpBytesRead()/(double)ps.getpContentLength();  //百分比
            if(percent != 0d){
                DecimalFormat df = new DecimalFormat("0.0");
                percent = Double.parseDouble(df.format(percent));
            }
        }
        this.outJson(response, new JSONResult(true, percent.toString()));
    }

    大致是这样,只为记录,不想几年后什么都没留下就走了。

© 著作权归作者所有

共有 人打赏支持
hold_the_line
粉丝 0
博文 6
码字总数 1956
作品 0
深圳
HTML5矢量实现文件上传进度条

在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传、上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5...

xhload3d
2015/11/22
248
1
基于HT for Web矢量实现HTML5文件上传进度条

在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传、上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5...

xhload3d
2015/06/08
0
0
js的XMLHttpRequest做文件上传进度条问题

XMLHttpRequest 做文件上传进度条显示 xhr.upload.addEventListener("progress", uploadProgress, false); 这个监控到的进度条是真实的上传进度条么? 疑问1:为什么上传完成后服务器要过会才...

那天早上
2013/11/08
4.6K
3
一些文件上传组件(Flash,JQuery,asp,php,js,AJAX)

FancyUpload FancyUpload是一个采用Flash与Ajax(MooTools)技术实现包含上传进度条的多文件上传组件,类似于SWFUpload。 FancyUpload Mootools jqUploader 结合Javascript与Flash开发,拥有...

老朱教授
2017/10/01
0
0
Flash的文件上传组件--AlanXUpload

AlanXUpload是一个通过flash技术提供批量上传文件的web批量上传组件,用户可以自定义上传的文件类型、大小、数量,上传的地址,上传的处理方式,自定义上传UI,接受服务器发送的反馈信息,并...

匿名
2009/12/02
24.9K
1
android AsyncHttpClient 取消上传貌似没有效果

我在用AsyncHttpClient 进行文件上传的时候,增加了一个进度条,其实现逻辑在 onProgress方法中,进行进度条显示的 可是,当我上传到一半的时候,我取消上传,执行 client.cancelRequests(Ma...

天王盖地虎626
2016/06/14
251
0
MVC5:使用Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能。 基本功能:实现带有进度...

柠檬酷
2015/11/23
84
0
MVC5:使用Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能。 基本功能:实现带有进度...

柠檬酷
2015/10/08
131
0
求一个文件上传与管理的控件??

至少提供以下功能: 用jsp页面引用该控件,可以上传多个文件,并可以对上传的文件执行删除,下载等管理操作。 最好还有如下功能: 可以对上传的文件查询过滤; 对于图片文件可以直接显示; ...

haoamz
2012/12/25
126
2
jquery+php实现ajax单个上传

HTML部分 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> <div class="btn"> <span>添加附件</span> <inpu......

魏邪乎
2014/06/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vue-router懒加载

1. vue-router懒加载定义 当路由被访问的时候才加载对应组件 2. vue-router懒加载作用 当构建的项目比较大的时候,懒加载可以分割代码块,提高页面的初始加载效率。 ###3. vue-router懒加载实...

不负好时光
11分钟前
0
0
庆祝法国队夺冠:用Python放一场烟花秀

天天敲代码的朋友,有没有想过代码也可以变得很酷炫又浪漫?今天就教大家用Python模拟出绽放的烟花庆祝昨晚法国队夺冠,工作之余也可以随时让程序为自己放一场烟花秀。 这个有趣的小项目并不...

猫咪编程
13分钟前
0
0
SpringBoot | 第七章:过滤器、监听器、拦截器

前言 在实际开发过程中,经常会碰见一些比如系统启动初始化信息、统计在线人数、在线用户数、过滤敏高词汇、访问权限控制(URL级别)等业务需求。这些对于业务来说一般上是无关的,业务方是无需...

oKong
27分钟前
4
0
存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储

存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储 存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储。 顺序结构和链接结构适用在内存结构中。 顺序表每个单元都是按物理...

DannyCoder
37分钟前
1
0
Firefox 61已经为Ubuntu 提供支持

最新和最好的Mozilla Firefox 61 “Quantum”网络浏览器已经为Ubuntu Linux操作系统的用户提供了支持,现在可以通过官方软件库进行更新。 Mozilla于2018年6月26日发布了Firefox 61版本,该版...

六库科技
今天
0
0
Win10升级后执行系统封装(Sysprep)报错

开始封装 一年多以前开始给公司封装Win10系统,便于统一给公司电脑初始化携带各种软件的系统,致力于装完既可以开发的状态。那时候最新的版本是Win10 1703版本,自然就以他为母盘,然后结合V...

lyunweb
今天
40
0
php 性能优化

#什么情况下会遇到性能问题 PHP 语法使用的不恰当

to_be_better
今天
0
0
Jenkins 构建触发器操作详解

前言 跑自动化用例每次用手工点击jenkins出发自动化用例太麻烦了,我们希望能每天固定时间跑,这样就不用管了,坐等收测试报告结果就行。 一、定时构建语法 * * * * * (五颗星,中间用空格隔...

覃光林
今天
0
0
IDEA配置技巧

超详细设置Idea类注释模板和方法注释模板 idea去掉注解param下划线 JetBrains全系列破解

AK灬
今天
0
0
rsync通过服务同步/Linux系统日志/screen工具

rsync通过服务同步 分为服务端(机器A) 和客户端(机器B) 机器A操作编辑/etc/rsyncd.conf配置文件 [root@yolks1 ~]# vim /etc/rsyncd.conf 文件中添加以下配置 port=873 ...

Hi_Yolks
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部