#jqGrid 多级表+获取文件时长+文件上传下载

本文详细介绍使用Java进行音视频文件的大小与时长读取、文件上传与下载的实现方法,包括依赖库的引入、文件信息获取、文件上传与路径修改、文件下载流程及二级表格展示。

效果图

在这里插入图片描述

导入 jar包

<dependency>
            <groupId>org</groupId>
            <artifactId>jaudiotagger</artifactId>
            <version>2.0.3</version>
        </dependency>
后台代码
//获取大小
        long l = sing.getSize();
        String size = l / 1024 / 1024+"MB";
        //获取时长
        AudioFile read = AudioFileIO.read(new File(realPath, newFileName));
        AudioHeader audioHeader = read.getAudioHeader();
        //音频的秒数
        int trackLength = audioHeader.getTrackLength();

文件上传

jqGrid做文件上传时,上传后然后直接修改存放文件的路径

 <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.4</version>
        </dependency>
if (oper.equals("add")){
            String add = chapterService.add(albumId, chapter);
            return add;
        }

{
                        closeAfterAdd:true,
                        afterSubmit:function (response) {
                            var chapterId=response.responseText;
                            $.ajaxFileUpload({
                                url:"${pageContext.request.contextPath}/chapter/upload",
                                //文件名
                                fileElementId:"sing",
                                //当前对象id
                                data:{chapterId:chapterId},
                                success:function (data) {
                                //表格刷新
                                    $("#"+tableId).trigger("reloadGrid");
                                }
                            });
                            return response;
                        }
                    },


String realPath = session.getServletContext().getRealPath("/mp3/");
        File file = new File(realPath);
        if(!file.exists()){
            file.mkdirs();
        }
        String filename = sing.getOriginalFilename();
        String newFileName = new Date().getTime() + "_" + filename;

        try {
            sing.transferTo(new File(file,newFileName));
        } catch (IOException e) {
            e.printStackTrace();
        }
        //调用修改数据库的方法

文件下载

String realPath = session.getServletContext().getRealPath("/mp3/");
		//定义文件
        File file = new File(realPath, audio);
        //切割文件名字
        String s = audio.split("_")[1];
        //改编码格式
        String encode = URLEncoder.encode(s, "UTF-8");
        //设置头文件
        response.setHeader("content-disposition","attachment;fileName="+encode);
        ServletOutputStream outputStream = null;
        try {
        //获取输出流
            outputStream = response.getOutputStream();
            //下载
            FileUtils.copyFile(file,outputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            try {
            //关闭输出流
                outputStream.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

二级表格

subGrid:true,
            subGridRowExpanded:function (subGridId, albumId) {
                var tableId = subGridId+"table";
                var pagerId = subGridId+"pager";
                $("#"+subGridId).html(
                    "<table style=\"text-align: center\" id="+tableId+"></table>\n" +
                    "<div id="+pagerId+"></div>"
                );
                $("#"+tableId).jqGrid({
                    url:"${pageContext.request.contextPath}/chapter/findByPage?albumId="+albumId,
                    editurl:"${pageContext.request.contextPath}/chapter/edit?albumId="+albumId,
                    datatype:"json",
                    //参数
                    //postData:{albumId:albumId},
                    colNames:["标题","大小","时长","上传时间","音频","操作"],
                    colModel:[
                        {name:"title",editable:true},
                        {name:"size",width:"40px"},
                        {name:"time",width:"70px"},
                        {name:"date",width:"70px"},
                        {name:"sing",editable:true,edittype:"file"},
                        {name:"",width:"250px",
                            formatter:function (cellvalue, options, rowObject) {
                            //添加播放按钮,自己添加文件下载按钮
                                return"<audio controls src=\"mp3/"+rowObject.sing+"\"></audio>"+
                                "       <a><span οnclick=\"downloads('"+rowObject.sing+"')\" class='glyphicon glyphicon-download-alt'></span></a>";
                            }
                        }
                    ],
                    styleUI:"Bootstrap",//改变样式
                    autowidth:true,//自适应宽度
                    pager:"#"+pagerId,
                    rowNum:2,
                    page:1,
                    rowList:[2,3,4],
                    rownumbers: true,//显示行号
                    multiselect:true,//多选框
                    viewrecords:true,
                    height:"60%"
                }).jqGrid("navGrid","#"+pagerId,{search:false},
                    {//控制编辑按钮,在之前或者之后进行额外操作
                        closeAfterEdit:true,
                        beforeShowForm:function (obj) {
                        //不修改的属性
                            obj.find("#size").prop("disabled",true);
                        }
                    },
                    {
                    //控制添加按钮,在之前或者之后进行额外操作
                        closeAfterAdd:true
                    },
                    {
                    //控制删除按钮,在之前或者之后进行额外操作
                    })

            }
jqgrid通用编辑规则 使用 editoptions ,主要用于定义勾选或者未勾选时的值,例如editoptions: { value:"Yes:No" } <input type="checkbox" value="Yes" offval="No".../> 当value为yes,checkbox被勾选,否则未勾选。值将会作为参数传递到jqGrid配置的editurl中。 下载文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p>要下载文件</p> <a href="txt/get.txt" download="get">get.txt</a> </body> </html> 测试文件:test3/minmin/download.html 点击图片翻转显示文字 点击图片,则调用changePage方法 [removed] $(function () { $('.pagination li').click(changePage); $('.portfolio-item').magnificPopup({ type: 'image', gallery:{ enabled:true } }); }); [removed] 切换图片 移除图片,显示当前的div function changePage(event) { var pageNo = $(this).html(); $('.portfolio-page').hide();//实现图片的隐藏 $('#page-' + pageNo).fadeIn();//以渐退的方式隐藏 $('.pagination li').removeClass('active');//removeClass() 方法从被选元素移除一个或多个类。 $(this).addClass('active'); //addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。 } 测试文件:test3/flip项目 统计 data-percent 显示的信息为圆形统计,不需要添加额外图像文件 //canvas将百分比以图形的形式显示出来 var initPieChart = function() { $('.percentage').easyPieChart({ barColor: '#BF1F42', trackColor: '#1E4598', scaleColor:false, lineCap: 'round', lineWidth:50, borderRadius:0, animate: 1000, size:395 }); } //初始化饼图 $(function(){ initPieChart(); }); 测试文件:test3/tongji.html 星际评分条 分为十分制和百分制 function rat(star,result,m){ star= '#' + star; result= '#' + result; $(result).hide();//将结果DIV隐藏 $(star).raty({ hints: ['10','20', '30', '40', '50','60', '70', '80', '90', '100'], path: "css/img", starOff: 'star-off-big.png', starOn: 'star-on-big.png', size: 24, start: 40, showHalf: true, target: result, targetKeep : true,//targetKeep 属性设置为true,用户的选择值才会被保持在目标DIV中,否则只是鼠标悬停时有值,而鼠标离开后这个值就会消失 click: function (score, evt) { //第一种方式:直接取值 alert('你的评分是'+score*m+'分'); } }); } 测试文件:test3/rankScore/index.html 树形结构 var dataSource1 = function(options, callback){ var $data = null if(!("text" in options) && !("type" in options)){ $data = tree_data;//树的根节点 callback({ data: $data }); return; } else if("type" in options && options.type == "folder") { if("additionalParameters" in options && "children" in options.additionalParameters) $data = options.additionalParameters.children || {};//给父节点绑定子节点 else $data = {}//no data } if($data != null)//此setTimeout仅用于模仿一些随机延迟 setTimeout(function(){callback({ data: $data });} , parseInt(Math.random() * 500) + 200); } 测试文件:test3/treeview.html
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值