前端上传视频时需要下载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;
}
}
复制代码
效果图如下
后台返回的结果如下: 文件名以及视频时长