jqGrid结合ajaxFileUpload进行音频上传+获取音频文件时长和大小+jqGrid二级表格

• 项目背景:

项目开发需要使用jqGrid生成表格并在表格中生成音频并可在线听歌,并实现从用户本地上传音频至服务器,如下图所示

基本方法与JqGrid结合AjaxFileUpload插件进行文件上传相似,这里只写部分不同的地方

• 思路：

1. 先执行添加到数据库中的操作，此时文件时长和文件大小是空的，只添加一些基础字段

2.进行文件上传之后，获取这个文件时长和文件大小，修改数据库

 

• 代码实现

• 前台代码
• 注意需要导js文件,ajaxFileUpload的js和jqGrid和BootStrap的js

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<c:set value="${pageContext.request.contextPath}" var="ctx"></c:set>
    <script>
        $(function () {
            $("#album-table").jqGrid({
                url: "${ctx}/album/findByPage",//分页查询提交的路径
                datatype: "json",
                styleUI:'Bootstrap',
                colNames: ['ID','标题','封面', '集数','作者','简介','评分','播音','创建日期'],
                //cellEdit: true,
                editurl: '${ctx}/album/operAlbum',//增删改提交的路径
                colModel: [
                    {name: 'id',hidden : true},
                    {name: 'title',editable : true},
                    {name: 'cover',editable : true, edittype:"file",
                        formatter:function (value, options, row) {
                            return "<img style='width:70px;height:35px' src='${ctx}/view/album/image/"+value+"'>";
                        }
                    },
                    {name: 'count',editable : true},
                    {name: 'author',editable : true},
                    {name: 'detail',editable : true},
                    {name: 'score',editable : true},
                    {name: 'broadcast',editable : true},
                    {name: 'createDate'}
                ],
                autowidth: true, //自适应父容器的大小宽度
                pager: '#pager',
                rowList: [5, 10, 15, 20],
                rowNum: 5,
                viewrecords: true,
                page: 1,
                //multiselect: true,
                //rownumbers: true,
                hidegrid: true,
                height:'500px',
                caption : "专辑详细信息",
                subGrid: true, //开启二级表格
                subGridRowExpanded : function(subgrid_id, id) {  //1. 子表格的id   2

                    var subgrid_table_id = subgrid_id + "_t";  //子表格的table id

                    var pager_id = "p_" + subgrid_table_id;    //子表格的page id


                    $("#" + subgrid_id).html(
                        "<table id='" + subgrid_table_id+"' class='scroll'></table>" +
                        "<div id='" + pager_id + "' class='scroll'></div>");

                    $("#" + subgrid_table_id).jqGrid(
                        {
                            url: "${ctx}/chapter/selectAllByAlbumId?albumId=" + id,
                            datatype: "json",
                            editurl: '${ctx}/chapter/operChapter?albumId=' + id,//增删改提交的路径
                            colNames: ['编号', '名称', '大小','时长','创建日期','音频'],
                            colModel: [
                                {name: "id", index: "num", width:90 },
                                {name: "title", index: "item", width:90,editable : true},
                                {name: "size", index: "qty", width:60,
                                    formatter:function (value, options, row) {
                                        return value+' MB';
                                    }
                                },
                                {name: "duration", index: "qty", width:60},
                                {name: "createDate", index: "qty",width:100},
                                {name: "audio", index: "qty",edittype:"file",formatter:function (value,option,rows) {
                                        return "<audio controls preload=\"metadata\">\n" +
                                            "  <source src=\"${ctx}/view/album/chapter/"+value+"\" type=\"audio/mpeg\">\n" +
                                            "</audio>";
                                    },editable : true},
                            ],
                            autowidth: true, //自适应父容器的大小宽度
                            rowList: [5, 10, 15, 20],
                            rowNum: 5,
                            viewrecords: true,
                            page: 1,
                            pager: pager_id,
                            height: '300px',
                            styleUI:'Bootstrap',
                        }).jqGrid('navGrid',
                        "#" + pager_id, {
                            edit: true,
                            add: true,
                            del: true,
                            search: false
                        },{
                            //控制修改操作
                            closeAfterEdit:true,
                            afterSubmit:function (response) {
                                var id = response.responseJSON.data;
                                var code = response.responseJSON.code;
                                if (code == 200){
                                    $.ajaxFileUpload( {
                                        url : "${ctx}/chapter/upload",//用于文件上传的服务器端请求地址
                                        fileElementId : 'audio' +
                                            '',    //文件上传空间的id属性  <input type="file" id="file" name="file" />
                                        //dataType : 'json',       //返回值类型 一般设置为json,但是前台如果返回的不是json格式，而是void或者字符串类型，则这个一定要注掉
                                        type:'POST',
                                        data:{id:id},
                                        success : function() {
                                            $("#" + subgrid_table_id).trigger("reloadGrid");
                                        },
                                        error:function () {
                                            alert('出错了');
                                        }
                                    });
                                    return "true";
                                }
                            }
                        },
                        {
                            //控制添加操作
                            closeAfterAdd:true,
                            afterSubmit:function (response) {
                                var id = response.responseJSON.data;
                                var code = response.responseJSON.code;
                                if (code == 200){
                                    $.ajaxFileUpload( {
                                        url : "${ctx}/chapter/upload",//用于文件上传的服务器端请求地址
                                        fileElementId : 'audio',    //文件上传空间的id属性  <input type="file" id="file" name="file" />
                                        //dataType : 'json',       //返回值类型 一般设置为json,但是前台如果返回的不是json格式，而是字符串类型，则这个一定要注掉
                                        type:'POST',
                                        data:{id:id},
                                        success : function() {
                                            $("#" + subgrid_table_id).trigger("reloadGrid");
                                        },
                                        error:function () {
                                            alert('出错了');
                                        }
                                    });
                                    return "true";
                                }
                            }
                        });
                }
            }).navGrid('#pager', {'add': true, 'edit': true, 'del': true, 'search': false, 'refresh': true},
                {
                    //控制修改操作
                    closeAfterEdit:true,
                    afterSubmit:function (response) {
                        var id = response.responseJSON.data;
                        var code = response.responseJSON.code;
                        if (code == 200){
                            $.ajaxFileUpload( {
                                url : "${ctx}/album/upload",//用于文件上传的服务器端请求地址
                                fileElementId : 'cover',    //文件上传空间的id属性  <input type="file" id="file" name="file" />
                                //dataType : 'json',       //返回值类型 一般设置为json,但是前台如果返回的不是json格式，而是字符串类型，则这个一定要注掉
                                type:'POST',
                                data:{id:id},
                                success : function() {
                                    $("#album-table").trigger("reloadGrid");
                                },
                                error:function () {
                                    alert('出错了');
                                }
                            });
                            return "true";
                        }
                    }
                },
                {
                    //控制添加操作
                    closeAfterAdd:true,
                    afterSubmit:function (response) {
                        var id = response.responseJSON.data;
                        var code = response.responseJSON.code;
                        if (code == 200){
                            $.ajaxFileUpload( {
                                url : "${ctx}/album/upload",//用于文件上传的服务器端请求地址
                                fileElementId : 'cover',    //文件上传空间的id属性  <input type="file" id="file" name="file" />
                                //dataType : 'json',       //返回值类型 一般设置为json,但是前台如果返回的不是json格式，而是字符串类型，则这个一定要注掉
                                type:'POST',
                                data:{id:id},
                                success : function() {
                                    $("#album-table").trigger("reloadGrid");
                                },
                                error:function () {
                                    alert('出错了');
                                }
                            });
                            return "true";
                        }
                    }
                }
            );
        });

    </script>

<table id="album-table" class="text-center"></table>
<div id="pager"></div>

• 后台代码

获取文件时长和大小

//首先需要导入Maven依赖
<!--获取文件时长的jar-->
<!-- https://mvnrepository.com/artifact/com.github.dadiyang/jave -->
    <dependency>
        <groupId>com.github.dadiyang</groupId>
        <artifactId>jave</artifactId>
        <version>1.0.5</version>
    </dependency>
 
/*获取文件时长*/
        Encoder encoder = new Encoder();
        long ls = 0;
        MultimediaInfo m;
        try {
            m = encoder.getInfo(file);  //这里传入的是文件对象
            ls = m.getDuration()/1000;  //得到一个long类型的时长
 
        } catch (Exception e) {
            System.out.println("获取音频时长有误：" + e.getMessage());
        }
       chapter.setDuration(String.valueOf(ls/60)+":"+String.valueOf(ls%60)); //转换为分钟:秒
 
 

//获取文件大小
//file.length可以获取文件字节大小,保留两位小数
double size = file.length() / 1024.0 / 1024;
size = (double) Math.round(size * 100) / 100;