plupload与springmvc分段上传视频

前端上传视频时需要下载plupload插件https://www.plupload.com/download/
需要导入以下js文件
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../js/plupload.full.min.js"></script>
<script type="text/javascript" src="../../js/zh_CN.js"></script>
<script type="text/javascript" src="../../js/jquery.plupload.queue.js"></script>
css样式:
 <link rel="stylesheet" href="../../css/jquery.plupload.queue.css" media="all" />
 还需要导入
/js/Moxie.swf'和/js/Moxie.xap
 
 <body>
<div id="uploader">
    <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
<button id="toStop">暂停一下</button>
<button id="toStart">再次开始</button>
<%--<audio src="${ctx}/upload/player" controls="controls">
    Your browser does not support the audio element.
</audio>--%>
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../js/plupload.full.min.js"></script>
<script type="text/javascript" src="../../js/zh_CN.js"></script>
<script type="text/javascript" src="../../js/jquery.plupload.queue.js"></script>

<script type="text/javascript">
    $(function() {
        // Initialize the widget when the DOM is ready
        var uploader = $("#uploader").pluploadQueue({
            // General settings
            runtimes: 'html5,flash,silverlight,html4',
            url: "http://localhost:8082/upload/pluploadUpload",

            // Maximum file size
            max_file_size: '10000mb',

            chunk_size: '1mb',

            // Resize images on clientside if we can
            resize: {
                width: 200,
                height: 200,
                quality: 90,
                crop: true // crop to exact dimensions
            },

            // Specify what files to browse for
            filters: [
                {title: "Image files", extensions: "jpg,gif,png"},
                {title: "Vedio files", extensions: "mp4,mkv"},
                {title: "Zip files", extensions: "zip,avi"}
            ],

            // Rename files by clicking on their titles
            rename: true,

            // Sort files
            sortable: true,

            // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
            dragdrop: true,

            // Views to activate
            views: {
                list: true,
                thumbs: true, // Show thumbs
                active: 'thumbs'
            },

            // Flash settings
            flash_swf_url: '${ctx}/js/Moxie.swf',

            // Silverlight settings
            silverlight_xap_url: '${ctx}/js/Moxie.xap',
            init: { //监听函数
              /*  FilesAdded: function(uploader,file) { //当文件添加到上传队列后触发
                    uploader.start(); //开始上传
                    return false;
                },*/
               /* UploadProgress: function(uploader,file) { //会在文件上传过程中不断触发
                    console.info(uploader.total.percent + "%");
                    console.info(file.percent + "%"); //文件已上传部分所占的百分比
                },*/
                FileUploaded: function(uploader,file,responseObject) { //当队列中的某一个文件上传完成后触发
                    console.info(responseObject.response); //服务器返回的文本
                    console.info(responseObject.status); //服务器返回的http状态码,比如200
                },
              /*  UploadComplete: function(uploader,file) { //当上传队列中所有文件都上传完成后触发
                    console.info("ok");
                },*/
                Error: function(uploader,errObject) { //当发生错误时触发
                    console.info(errObject.code); //错误代码
                    console.info(errObject.message); //错误信息
                }
            }
        }); //初始化Plupload实例

        $("#toStop").on('click', function () {
            uploader.stop();
        });

        $("#toStart").on('click', function () {
            uploader.start();
        });
    });
</script>
</body>
后台返回值时init监听函数可以取到所需要的数据

后台controller层
package com.irs.controller;

import com.irs.pojo.Plupload;
import com.irs.service.PluploadService;
import com.irs.util.GlobalUtil;
import com.irs.util.ResultUtil;
import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.HashMap;
import java.util.Map;

@Controller
@RequestMapping("upload")
public class UploadController {

    @Autowired
    private PluploadService pluploadService;

    @RequestMapping(value = "/pluploadUpload")
    @ResponseBody
    public ResultUtil upload(Plupload plupload, HttpServletRequest request, HttpServletResponse response) {

        String FileDir = "pluploadDir";//文件保存的文件夹
        plupload.setRequest(request);//手动传入Plupload对象HttpServletRequest属性

        //int userId = ((User)request.getSession().getAttribute("user")).getUserId();

        //文件存储绝对路径,会是一个文件夹,项目相应Servlet容器下的"pluploadDir"文件夹,还会以用户唯一id作划分
       // File dir = new File(request.getSession().getServletContext().getRealPath("/") + FileDir);
        File dir = new File(GlobalUtil.getValue("upfile.path"));
        if(!dir.exists()){
            dir.mkdirs();//可创建多级目录,而mkdir()只能创建一级目录
        }
        //开始上传文件
        Plupload plupload1=pluploadService.upload(plupload, dir);
        Map map = new HashMap<>();
        map.put("plupload", plupload1);
        return ResultUtil.ok(map);
    }

    }
service层
package com.irs.service;

import com.irs.pojo.Plupload;
import it.sauronsoftware.jave.Encoder;
import it.sauronsoftware.jave.MultimediaInfo;
import org.springframework.stereotype.Component;
import org.springframework.util.MultiValueMap;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import java.io.*;
import java.sql.Timestamp;
import java.util.Iterator;
import java.util.List;


/**
 * Plupload Service模块,同Plupload实体类一样,因为要用到Spring web相关依赖,所以不将其放在Service模块
 */
@Component    //将写好的类注入SpringIOC容器中让Controller自动装载
public class PluploadService {


    public Plupload upload(Plupload plupload, File pluploadDir){
        String fileName = ""+System.currentTimeMillis()+plupload.getName();//在服务器内生成唯一文件名
        Plupload plupload1=upload(plupload, pluploadDir, fileName);
        return plupload1;
    }

    private Plupload upload(Plupload plupload,File pluploadDir,String fileName){

        int chunks = plupload.getChunks();//用户上传文件被分隔的总块数
        int nowChunk = plupload.getChunk();//当前块,从0开始

        //这里Request请求类型的强制转换可能出错,配置文件中向SpringIOC容器引入multipartResolver对象即可。
        MultipartHttpServletRequest multipartHttpServletRequest  = (MultipartHttpServletRequest)plupload.getRequest();
        //调试发现map中只有一个键值对
        MultiValueMap<String,MultipartFile> map = multipartHttpServletRequest.getMultiFileMap();

        if(map!=null){
            try{
                Iterator<String> iterator = map.keySet().iterator();
                while(iterator.hasNext()){

                    String key = iterator.next();
                    List<MultipartFile> multipartFileList = map.get(key);

                    for(MultipartFile multipartFile:multipartFileList){//循环只进行一次

                        plupload.setMultipartFile(multipartFile);//手动向Plupload对象传入MultipartFile属性值
                        File targetFile = new File(pluploadDir+"/"+fileName);//新建目标文件,只有被流写入时才会真正存在
                        if(chunks>1){//用户上传资料总块数大于1,要进行合并

                            File tempFile = new File(pluploadDir.getPath()+"/"+multipartFile.getName());
                            //第一块直接从头写入,不用从末端写入
                            savePluploadFile(multipartFile.getInputStream(),tempFile,nowChunk==0?false:true);

                            if(chunks-nowChunk==1){//全部块已经上传完毕,此时targetFile因为有被流写入而存在,要改文件名字
                                tempFile.renameTo(targetFile);

                                //每当文件上传完毕,将上传信息插入数据库
                                Timestamp now = new Timestamp(System.currentTimeMillis());

                                System.out.println(now);
                               // youandmeService.uploadInfo(fileName,((User)(plupload.getRequest().getSession().getAttribute("user"))).getUsername(),now);
                            }
                        }
                        else{
                            //只有一块,就直接拷贝文件内容
                            multipartFile.transferTo(targetFile);

                            //每当文件上传完毕,将上传信息插入数据库
                            Timestamp now = new Timestamp(System.currentTimeMillis());

                            System.out.println(now);
                           // youandmeService.uploadInfo(fileName, ((User) (plupload.getRequest().getSession().getAttribute("user"))).getUsername(), now);
                        }
                        //获取视频时长
                        Encoder encoder = new Encoder();
                        String length = "";
                        try {
                            MultimediaInfo m = encoder.getInfo(targetFile);
                            System.out.println("-------"+m.getDuration());
                            long ls = m.getDuration()/1000;
                            int hour = (int) (ls/3600);
                            int minute = (int) (ls%3600)/60;
                            int second = (int) (ls-hour*3600-minute*60);
                            length = hour+"时"+minute+"分"+second+"秒";
                            System.out.println(length);
                            Plupload plupload1=new Plupload();
                            plupload1.setName(fileName);
                            plupload1.setTimelength(length);
                            return plupload1;
                        } catch (Exception e) {
                            e.printStackTrace();
                        }
                    }
                }
            }
            catch (IOException e){
                e.printStackTrace();
            }
        }
        return null;
    }
    private void savePluploadFile(InputStream inputStream,File tempFile,boolean flag){
        OutputStream outputStream = null;
        try {
            if(flag==false){
                //从头写入
                outputStream = new BufferedOutputStream(new FileOutputStream(tempFile));
            }
            else{
                //从末端写入
                outputStream = new BufferedOutputStream(new FileOutputStream(tempFile,true));
            }
            byte[] bytes = new byte[1024];
            int len = 0;
            while ((len = (inputStream.read(bytes)))>0){
                outputStream.write(bytes,0,len);
            }
        }
        catch (FileNotFoundException e){
            e.printStackTrace();
        }
        catch (IOException e){
            e.printStackTrace();
        }
        finally {
            try{
                outputStream.close();
                inputStream.close();
            }
            catch (IOException e){
                e.printStackTrace();
            }
        }
    }
}
以及plupload实体类
package com.irs.pojo;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;

/**
 * Plupload实体类固定格式,属性名不可修改
 * 因为MultipartFile要用到Spring web的依赖,而该依赖在web模块中才引入,所以不把该实体类放在entity模块
 */
public class Plupload {
    /**文件原名*/
    private String name;
    /**用户上传资料被分解总块数*/
    private int chunks = -1;
    /**当前块数(从0开始计数)*/
    private int chunk = -1;
    /**HttpServletRequest对象,不会自动赋值,需要手动传入*/
    private HttpServletRequest request;
    /**保存文件上传信息,不会自动赋值,需要手动传入*/
    private MultipartFile multipartFile;

    private String timelength;

    public String getTimelength() {
        return timelength;
    }

    public void setTimelength(String timelength) {
        this.timelength = timelength;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getChunks() {
        return chunks;
    }

    public void setChunks(int chunks) {
        this.chunks = chunks;
    }

    public int getChunk() {
        return chunk;
    }

    public void setChunk(int chunk) {
        this.chunk = chunk;
    }

    public HttpServletRequest getRequest() {
        return request;
    }

    public void setRequest(HttpServletRequest request) {
        this.request = request;
    }

    public MultipartFile getMultipartFile() {
        return multipartFile;
    }

    public void setMultipartFile(MultipartFile multipartFile) {
        this.multipartFile = multipartFile;
    }
}

复制代码

效果图如下

后台返回的结果如下: 文件名以及视频时长

转载于:https://juejin.im/post/5c8084de51882524826163c7

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值