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

利用jsp+Extjs实现动态显示文件上传进度的完整攻略主要有以下几步：

1、前端页面

前端页面需要使用Extjs实现。首先需要在页面中引入相应的js文件，例如：

<script src="ext-all.js"></script>
<script src="ext-lang-zh_CN.js"></script>

然后需要在页面中添加相应的组件，例如：

var progressBar = new Ext.ProgressBar({
    width: 300,
    text: '上传进度',
    renderTo: Ext.getBody()
});

var uploadForm = new Ext.form.FormPanel({
    url: 'upload.jsp',
    fileUpload: true,
    frame: true,
    title: '上传文件',
    labelWidth: 50,
    items: [{
        xtype: 'filefield',
        anchor: '100%',
        fieldLabel: '选择文件',
        name: 'upload'
    }]
});

uploadForm.addButton('上传', function(){
    if(uploadForm.getForm().isValid()){
        progressBar.wait({
            interval: 200,
            text: '上传中，请稍候',
            scope: this
        });

        uploadForm.getForm().submit({
            success: function(form, action){
                progressBar.reset();
                Ext.MessageBox.alert('提示', action.result.msg);
            },
            failure: function(form, action){
                progressBar.reset();
                Ext.MessageBox.alert('提示', action.result.msg);
            }
        });
    }
})

uploadForm.render('form');

在上面的代码段中，我们使用了Ext.ProgressBar组件来显示上传进度，使用了Ext.form.FormPanel组件来实现文件上传的表单，同时添加了一个“上传”按钮，并在点击按钮后调用submit方法来提交表单。

2、服务端处理

服务端处理部分需要使用jsp来实现。首先需要在jsp页面中开启流，使用response对象获取OutputStream，将文件内容通过字节流的方式写到客户端。同时，需要在OutputStream的flush()方法中将上传进度通过response的writer对象返回给客户端。示例代码如下：

<%@ page contentType="text/html; charset=utf-8" %>

<%
    String savePath = getServletContext().getRealPath("/") + "upload";
    File uploadDir = new File(savePath);

    if(!uploadDir.exists()){
        uploadDir.mkdir();
    }

    String fileName = "";
    InputStream input = null;
    FileOutputStream fos = null;
    OutputStream output = null;

    try{
        FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        List<FileItem> items = upload.parseRequest(request);

        for(FileItem item : items){
            if(!item.isFormField()){
                fileName = item.getName();
                input = item.getInputStream();
                fos = new FileOutputStream(savePath + "/" + fileName);

                byte[] buffer = new byte[1024];
                int len = -1;
                long fileSize = 0;

                while((len = input.read(buffer)) != -1){
                    fos.write(buffer, 0, len);
                    fileSize += len;
                    double progress = (double)fileSize / item.getSize();

                    response.setContentType("text/html;charset=UTF-8");
                    response.getWriter().write("{\"progress\":" + progress + "}");
                    response.getWriter().flush();
                }
            }
        }

        out.println("{\"success\":true,\"msg\":\"文件上传成功\"}");
    }catch(Exception e){
        out.println("{\"success\":false,\"msg\":\"文件上传失败\"}");
    }finally{
        try{
            fos.close();
            input.close();
        }catch(Exception e){

        }
    }
%>

在上面的代码段中，我们使用了response的writer对象来实现动态显示上传进度。通过计算当前上传大小与文件总大小的比例来计算上传进度并通过writer对象返回给客户端。

示例说明

示例一：使用jsp+Extjs实现文件上传

首先，在项目的根目录下创建一个名为“upload.jsp”的文件。
在“upload.jsp”文件中添加以下代码：

<%@ page contentType="text/html; charset=UTF-8" %>

<!DOCTYPE html>
<html>
<head>
    <title>上传文件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="ext-all.css" />
    <script src="ext-all.js"></script>
    <script src="ext-lang-zh_CN.js"></script>
    <script type="text/javascript">
        Ext.onReady(function(){
            var progressBar = new Ext.ProgressBar({
                width: 300,
                text: '上传进度',
                renderTo: Ext.getBody()
            });

            var uploadForm = new Ext.form.FormPanel({
                url: 'upload.jsp',
                fileUpload: true,
                frame: true,
                title: '上传文件',
                labelWidth: 50,
                items: [{
                    xtype: 'filefield',
                    anchor: '100%',
                    fieldLabel: '选择文件',
                    name: 'upload'
                }]
            });

            uploadForm.addButton('上传', function(){
                if(uploadForm.getForm().isValid()){
                    progressBar.wait({
                        interval: 200,
                        text: '上传中，请稍候',
                        scope: this
                    });

                    uploadForm.getForm().submit({
                        success: function(form, action){
                            progressBar.reset();
                            Ext.MessageBox.alert('提示', action.result.msg);
                        },
                        failure: function(form, action){
                            progressBar.reset();
                            Ext.MessageBox.alert('提示', action.result.msg);
                        }
                    });
                }
            })

            uploadForm.render('form');
        });
    </script>
</head>
<body>
    <div id="form"></div>
</body>
</html>

然后，在项目的根目录下创建一个名为“upload”的文件夹，用于存放上传的文件。
最后，将Extjs的相关文件（ext-all.js和ext-all.css）复制到项目根目录下，并启动Tomcat服务器，在浏览器中访问“http://localhost:8080/upload.jsp”页面即可上传文件。

示例二：使用jsp+Extjs实现动态进度条显示

首先，在“upload.jsp”文件中添加以下代码：

<%
    String savePath = getServletContext().getRealPath("/") + "upload";
    File uploadDir = new File(savePath);

    if(!uploadDir.exists()){
        uploadDir.mkdir();
    }

    String fileName = "";
    InputStream input = null;
    FileOutputStream fos = null;
    OutputStream output = null;

    try{
        FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        List<FileItem> items = upload.parseRequest(request);

        for(FileItem item : items){
            if(!item.isFormField()){
                fileName = item.getName();
                input = item.getInputStream();
                fos = new FileOutputStream(savePath + "/" + fileName);

                byte[] buffer = new byte[1024];
                int len = -1;
                long fileSize = 0;

                while((len = input.read(buffer)) != -1){
                    fos.write(buffer, 0, len);
                    fileSize += len;
                    double progress = (double)fileSize / item.getSize();

                    response.setContentType("text/html;charset=UTF-8");
                    response.getWriter().write("{\"progress\":" + progress + "}");
                    response.getWriter().flush();
                }
            }
        }

        out.println("{\"success\":true,\"msg\":\"文件上传成功\"}");
    }catch(Exception e){
        out.println("{\"success\":false,\"msg\":\"文件上传失败\"}");
    }finally{
        try{
            fos.close();
            input.close();
        }catch(Exception e){

        }
    }
%>

然后，在“upload.jsp”页面中添加以下代码：

<script type="text/javascript">
    Ext.onReady(function(){
        var progressBar = new Ext.ProgressBar({
            width: 300,
            text: '上传进度',
            renderTo: Ext.getBody()
        });

        var uploadForm = new Ext.form.FormPanel({
            url: 'upload.jsp',
            fileUpload: true,
            frame: true,
            title: '上传文件',
            labelWidth: 50,
            items: [{
                xtype: 'filefield',
                anchor: '100%',
                fieldLabel: '选择文件',
                name: 'upload'
            }]
        });

        uploadForm.addButton('上传', function(){
            if(uploadForm.getForm().isValid()){
                progressBar.wait({
                    interval: 200,
                    text: '上传中，请稍候',
                    scope: this
                });

                uploadForm.getForm().submit({
                    success: function(form, action){
                        progressBar.reset();
                        Ext.MessageBox.alert('提示', action.result.msg);
                    },
                    failure: function(form, action){
                        progressBar.reset();
                        Ext.MessageBox.alert('提示', action.result.msg);
                    }
                });
            }
        })

        uploadForm.render('form');

        var updateProgress = function(){
            Ext.Ajax.request({
                url: 'upload.jsp',
                success: function(response, options){
                    var result = Ext.decode(response.responseText);

                    if(result.success){
                        progressBar.updateProgress(result.progress);
                        setTimeout(updateProgress, 1000);
                    }
                },
                failure: function(response, options){

                }
            });
        }

        setTimeout(updateProgress, 1000);
    });
</script>

在上面的代码段中，我们使用了Ext.Ajax.request方法来定时向服务端发送请求，获取当前上传进度，并使用Ext.ProgressBar组件来动态显示上传进度。

最后，启动Tomcat服务器，在浏览器中访问“http://localhost:8080/upload.jsp”页面即可上传文件，并动态显示上传进度。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用jsp+Extjs实现动态显示文件上传进度 - Python技术站