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 readyvar uploader = $("#uploader").pluploadQueue({// General settingsruntimes: 'html5,flash,silverlight,html4',url: "http://localhost:8082/upload/pluploadUpload",// Maximum file sizemax_file_size: '10000mb',chunk_size: '1mb',// Resize images on clientside if we canresize: {width: 200,height: 200,quality: 90,crop: true // crop to exact dimensions},// Specify what files to browse forfilters: [{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 titlesrename: true,// Sort filessortable: true,// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)dragdrop: true,// Views to activateviews: {list: true,thumbs: true, // Show thumbsactive: 'thumbs'},// Flash settingsflash_swf_url: '${ctx}/js/Moxie.swf',// Silverlight settingssilverlight_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 {@Autowiredprivate PluploadService pluploadService;@RequestMapping(value = "/pluploadUpload")@ResponseBodypublic 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

plupload与springmvc分段上传视频相关推荐

vue+videojs视频播放、视频切换、视频断点分段上传
"本次需求是做一个视频列表,点击视频列表播放对应视频:同时要求实现断点分段上传大文件(视频)的功能 . videojs文档:Getting Started with Video.js - V ...
html 前端优化上传视频,前端上传组件Plupload使用---上传大视频(分片上传)
上传视频到服务器 1.引入js插件: 2.html页面如图: 上传视频: 上传视频支持AVI.wma.rmvb.rm.flash.mp4.mid.3GP等格式 3.js代码 $(function ( ...
php - 基于 webuploader 视频大文件分片分段上传，支持断点续传（刷新、关闭页面、重新上传、网络中断等情况）带进度条，前端后端都有示例源码详细教程
效果图文件上传前先检测该文件是否已上传,如果已上传提示 "文件已存在",如果未上传则直接上传. 基于 php+webuploader的大文件分片上传,带进度条,支持断点续传(刷新 ...
springmvc web网站开发上传视频到远程服务器解决方案
springmvc web网站开发上传视频到远程服务器解决方案!近期在给学校做官方网站设计时,有一个业务需求是,后台要增加一个视频管理模块,管理员在后台可以把本地硬盘剪辑好的视频文件,上传到远程服务器 ...
plupload php 分片,plupload上传视频等大文件
本文演示了新浪微博plupload上传视频文件,支持格式有mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv.本文的视频上传分两步,首先选择文件,然后点击上传按钮开始上传 ...
html5视频上传云,vue+七牛云上传视频文件
Qiniu-JavaScript-SDK基于七牛云存储官方 API 构建,其中上传功能基于 H5 File API.开发者基于 JS-SDK 可以方便的从浏览器端上传文件至七牛云存储,并对上传成功后的 ...
FileUpload 上传视频文件简单实例
我们都知道当Html input 标签类型为file时同时将from 表单元素的enctype属性设置为 multipart/form-data 这样就可以上传文件 ,但是这种方式只能上传文本 ...
基于fastadmin框架，上传视频，自动截取视频封面图
最近用fastadmin开发了一个项目,需要用到视频的封面图片,客户又不能一一提供视频对应的封面,为减少工作量,需要在后台上传视频后直接生成默认封面图片,也可以自动上传想要的封面图片: 利用fasta ...
通过h5页面上传视频到Linux服务器
1. 上传视频到本地 https://www.jb51.net/article/132531.htm 2. 上传视频到Linux服务器建立ftp连接(保证服务器已经安装ftp及对应端口,帐号有权限) ...

plupload与springmvc分段上传视频

plupload与springmvc分段上传视频相关推荐

最新文章

热门文章