1. Python技术站首页
  2. 其他
  3. Java

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

• Java

利用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实现文件上传

  1. 首先，在项目的根目录下创建一个名为“upload.jsp”的文件。

  2. 在“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>

  1. 然后，在项目的根目录下创建一个名为“upload”的文件夹，用于存放上传的文件。

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

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

  1. 首先，在“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){

        }
    }
%>
  1. 然后，在“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组件来动态显示上传进度。

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

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

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月15日
下一篇 2023年6月15日

相关文章

  • 基于Java中字符串indexof() 的使用方法

    基于Java中字符串indexof() 的使用方法攻略 简介 在Java编程中，字符串是一种非常重要的数据类型，字符串操作是开发中常见的任务。字符串中indexof()方法就是字符串操作中的一个重要方法，它用于查找一个字符串中是否包含指定的字符或子字符串。 使用步骤 使用字符串中的indexof()方法需要遵循以下步骤： 创建一个字符串 java Strin…

    Java 2023年5月26日
    00

  • 微信小程序录音文件格式silk遇到的问题及解决方法

    微信小程序录音文件格式silk遇到的问题及解决方法 问题描述 最近在开发微信小程序录音功能时，遇到了一个问题，就是录音文件格式为silk格式，但无法在浏览器中直接播放，也无法在后端进行处理。这使得我们无法进行后续的处理工作。因此，我们需要找到一种解决方法。 问题分析 经过查阅资料，我们发现silk格式是由语音编解码器发明的，通常用在VoIP（网络电话）通信中…

    Java 2023年5月23日
    00

  • Java中String类常用方法使用详解

    Java中String类常用方法使用详解 String类是什么？ String是Java编程语言中表示字符串的类。Java中的所有字符串字面值（如 “abc” ）都作为此类的实例实现。字符串是常量；它们的值在创建之后不能更改。字符串缓冲区支持可变的字符串。因此在已知要修改的字符串的情况下，可以选择使用字符串缓冲区。 常用方法 1. length() 该方法用…

    Java 2023年5月29日
    00

  • spring boot项目如何采用war在tomcat容器中运行

    下面是Spring Boot项目如何部署到Tomcat容器中运行的攻略： 一、将项目打成war包 Spring Boot项目通常打成jar包，但是要部署到Tomcat容器中需要将其打成war包。如果使用Maven构建项目，则只需在pom.xml文件中添加以下代码： <packaging>war</packaging> 这样项目就会被打…

    Java 2023年6月2日
    00

  • 详解Java数组的四种拷贝方式

    下面是详解Java数组的四种拷贝方式： 概述 在Java中，我们可以使用多种方式对数组进行拷贝。这些拷贝方式包括：1. for循环2. System.arraycopy()方法3. Arrays.copyOf()方法4. clone()方法 本文将详细介绍这四种方式，并提供示例演示它们的使用方法和区别。 for循环 使用for循环拷贝数组是最基本和最常用的方…

    Java 2023年5月26日
    00

  • Mybatis动态sql超详细讲解

    为了更好地说明“Mybatis动态sql超详细讲解”的相关内容，本次攻略将分以下几个方面进行讲解： 动态SQL简介 Mybatis动态SQL语句的使用 Mybatis动态SQL语句的实例解析 Mybatis动态SQL语句实例二 动态SQL简介 在实际开发中，SQL语句的执行往往需要根据不同的条件进行动态调整，这就是动态SQL的概念。动态SQL主要包括两种形式…

    Java 2023年5月19日
    00

  • Spring 应用中集成 Apache Shiro的方法

    当在Spring应用中需要使用安全、身份验证等功能时，可以使用Apache Shiro安全框架。下面是在Spring应用中集成Apache Shiro的方法： 第一步：导入相关依赖 在pom.xml文件中，加入Shiro和Spring集成的依赖： <!– shiro –> <dependency> <groupId>o…

    Java 2023年5月20日
    00

  • Java实现FTP上传与下载功能

    下面是Java实现FTP上传与下载功能的完整攻略： 1. 准备环境 在进行FTP上传与下载之前，需要准备以下环境： Java运行环境 FTP服务器 FTP登录账号和密码 2. 引入FTP客户端库 Java提供了FTP客户端库供我们使用，常见的有Apache commons-net和Spring FTP等，这里我们以Apache commons-net为例。在…

    Java 2023年5月20日
    00
合作推广
合作推广
分享本页
返回顶部