java视频预览图片_java上传视频图片，使用layer弹窗预览

一、JSP代码

上传

二、JS代码(上传后在线点击预览)

var m_upload_type = "";

var m_obj = {};//在线弹窗预览

var m_obj_upload = {};//上传后台

$('body').on("change", "#onload", onchange_file);

$('body').on("click", "#show", show_flie);

function onchange_file() {

var objUrl = getObjectURL(this.files[0]);

var file = $("#onload").val();

var fileName = getFileName(file);

var unload_file = $('#onload')[0].files[0];//用来传给后台

var checkReturn = check_upload_file_type(fileName);//验证上传文件格式

if(!checkReturn){

alert("文件格式不正确!");

return;

}

m_obj[fileName] = objUrl;

m_obj_upload[fileName] = unload_file;

}

//返回的url使用layer弹窗可以弹出图片

function getObjectURL(file) {

var url = null ;

if (window.createObjectURL!=undefined) { // basic

url = window.createObjectURL(file) ;

} else if (window.URL!=undefined) { // mozilla(firefox)

url = window.URL.createObjectURL(file) ;

} else if (window.webkitURL!=undefined) { // webkit or chrome

url = window.webkitURL.createObjectURL(file) ;

}

return url ;

}

function getFileName(o){

var pos= o.lastIndexOf("\\");

var pointIndexs = o.lastIndexOf(".");

return o.substring(pos+1,pointIndexs);

}

function check_upload_file_type(fileName){

var successType = ['avi','wmv','vob','mp4','mov','mkv','flv','rmvb','AVI','WMV','VOB','MP4','MOV','MKV','FLV','RMVB','jpg','jpeg','bmp','png','gif','JPG','JPEG','BMP','PNG','GIF'];

var checkReturn = false;

var file = fileName;

fileName = fileName.split(".");

var arrLength = fileName.length;

var fileType = fileName[arrLength-1];

m_upload_type = "";

if(NOTNULL(fileType)){

for(var i = 0;i

if(fileType==successType[i]){

if(i>15){

m_upload_type = "img";

}else {

m_upload_type = "video";

}

checkReturn = true;

break;

}

}

}

return checkReturn;

}

function show_flie{

var arr = getArrUrl(m_obj);//获取弹窗url

if(m_upload_type=="img"){

showImg(arr);

}else if(m_upload_type=="video"){

showVideo(arr);

}

}

function showVideo(value){

layer.open({

type: 2,

title: false,

area: ['420px', '240px'],

shade: 0.3,

closeBtn: 1,

content: value

});

}

function showImg(value){

var picture_url = value;

var arr_photos = new Array();

var arr_show_photos = new Array();

if(NOTNULL(picture_url)){

arr_photos = picture_url.split('，');

for(var i = 0;i

if(NOTNULL(arr_photos[i])){

var tmp_photo = new Object();

tmp_photo["alt"] = "";

tmp_photo["pid"] = "";

tmp_photo["src"] = arr_photos[i];

tmp_photo["thumb"] = "";

arr_show_photos.push(tmp_photo);

}

}

var obj_photo = {

"title": "", //相册标题

"id": "", //相册id

"start": 0, //初始显示的图片序号，默认0

"data": arr_show_photos

};

layer.photos({

photos: obj_photo,

area: ['420px', '240px'],

closeBtn:1,

anim: 5,

shade:0.3

});

}

}

function getArrUrl(obj){

var arr = [];

for(var m in obj){//获取所有上传的在线预览弹窗url

arr.push(obj[m]);

}

return arr;

}

三、js代码(上传保存到服务器后预览)

$('body').on("click", "#file_upload", file_upload);

function file_upload(){

for(var i in m_obj_upload){

var data = new FormData();

data.append('userfile',m_obj_upload[i]);

$.ajax({

type:'POST',

url:"jee/EmergencyC/emergencyUpload",

data:data,

async:false,

processData: false, //一定要加否则后台会接收不到

contentType : false, //一定要加否则后台会接收不到

mimeType:"multipart/form-data",

success:function(data){

var obj = JSON.parse(data);

if(obj.status=="success"){

alert("上传成功!");

}

}

});

}

}

四、java-controller代码

@RequestMapping(value="jee/EmergencyC")

@Controller

public class EmergencyController{

/**

*

* @Date 2018年8月22日 上午11:44:33

* @Description 应急处置-图片视频上传操作

* @Fcunction emergencyUpload

* @param userfile

* @return ReturnDatas

*

*/

@RequestMapping(value="emergencyUpload",method=RequestMethod.POST)

@ResponseBody

@SystemControllerLog(description="应急处置-图片视频上传操作")

public ReturnDatas emergencyUpload(MultipartFile userfile){

ReturnDatas returnDatas = ReturnDatas.getSuccessReturnDatas();

try {

returnDatas.setData(emergencyService.emergencyUpload(userfile));

}catch (Exception e) {

e.printStackTrace();

LogUtil.error("应急处置-图片视频上传操作异常："+e.getMessage(),e);

returnDatas.setStatus(ReturnDatas.ERROR);

returnDatas.setMessage("应急处置-图片视频上传操作异常");

}

return returnDatas;

}

}

五、java-serviceimpl代码

/**

*

* @Description 应急处置-图片视频上传操作

* @param userfile

* @return String

* @throws Exception

*

*/

@Override

public String emergencyUpload(MultipartFile userfile) throws Exception {

String fileName = userfile.getOriginalFilename();

String type = "imgs/";

if(fileName.indexOf(".")>-1){

String[] successType = {"avi","wmv","vob","mp4","mov","mkv","flv","rmvb","AVI","WMV","VOB","MP4","MOV","MKV","FLV","RMVB","jpg","jpeg","bmp","png","gif","JPG","JPEG","BMP","PNG","GIF"};

String[] arrFlie = fileName.split("\\.");

int arrLength = arrFlie.length;

String flieType = arrFlie[arrLength-1];

if(StringUtils.isNotBlank(flieType)){

for (int i = 0; i < successType.length; i++) {

if(flieType.equals(successType[i])){

if(i>15){

type = "imgs/";

}else {

type = "videos/";

}

}

}

}

}

byte[] data = userfile.getBytes();//data即图片的子节文件

String path = virtualDir+virtualPro+type;

File fliePath = new File(path);

fliePath.mkdirs();

File file = new File(fliePath,fileName);

FileOutputStream out = new FileOutputStream(file);

out.write(data);//将data中全部的数据写到文件

out.close();

return path+fileName;

}

注：

保存到数据库里的路径为D:/javaX64/apache-tomcat-8.0.30/webapps/kysc/imgs/QQ截图20180822143333.png，tomcat运行项目点击弹窗预览时需要http://127.0.0.1:8080/kysc/imgs/QQ截图20180822143333.png；

http在jsp获取可以使用request.getScheme()；