七牛上传视频
package jarlun.framework.core.modules.upyun;
import java.io.IOException;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.multipart.MultipartFile;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;
public class VideoUploadService {
private final static Logger logger = LoggerFactory.getLogger(VideoUploadService.class);
//设置需要操作的账号的AK和SK
public static final String ACCESS_KEY = "*********************";
public static final String SECRET_KEY = "*********************";
/**
* 剪切后存放的空间
*/
public static final String screens_hot = "screens-hot";
public static ImgUploadResp imgUploadVideoFile(MultipartFile file) {
ImgUploadResp result = new ImgUploadResp();
//密钥配置
Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
//第二种方式: 自动识别要上传的空间(bucket)的存储区域是华东、华北、华南。
Zone z = Zone.autoZone();
Configuration c = new Configuration(z);
//创建上传对象
UploadManager uploadManager = new UploadManager(c);
//调用put方法上传
String newName = file.getOriginalFilename();
Response res = null;
try {
res = uploadManager.put(file.getBytes(), newName, auth.uploadToken(screens_hot));
} catch (IOException e) {
// 请求失败时打印的异常的信息
logger.error("七牛上传报错：{}",e);
}
if (res != null && res.statusCode == 200) {
result.setSuccess(true);
result.setUrl("http://***/"+ newName);
}else {
result.setSuccess(false);
result.setUrl("");
}
return result;
}
}
需要导入的mave包：
com.qiniu
qiniu-java-sdk
7.2.11
compile
js上传工具：
/*图片上传*/
var BASE_URL = ctx+'/static/js/webuploader-0.1.5/';
var options = {
needThumbnail: false,//是否需要预览
appendThumbnail: false,//是否覆盖预览图
thumbnailWidth: 180,//预览图片宽度
thumbnailHeight: 100,//预览图片高度
fileNumLimit:1,
multiple: true,//多文件上传
url: '',//url 1:二进制 2:表单
sendAsBinary: false,
auto: 'false',//自动上传
title: 'Images',//类型
extensions: 'jpg,jpeg,png',//接受的文件后缀
mimeTypes: 'image/jpg,image/jpeg,image/png',
quality: 100,//图片压缩质量
uploadStart: function(){
},
beforeMethod: function () {
}
};
/**视频上传
* @param imgBtn
* @param dndDiv
* @returns
*/
function initUploader_single3(imgBtn,dndDiv){
var $dndDiv = $(dndDiv),
$imgBtn = $(imgBtn),
file;
var uploader = WebUploader.create({
auto: true,
swf: BASE_URL + 'Uploader.swf',
server: ctx+'/videoUpload/videoUploadComm',
pick: {
id: imgBtn,
multiple: false
},
accept: {
title: 'Images',
extensions: 'mp4,gif,jpg,jpeg,bmp,png',
mimeTypes: 'video/*,image/jpg,image/jpeg,image/png,image/gif'
},
fileNumLimit: 1,
sendAsBinary: false,
duplicate: false
});
//文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
/*if(!/image\//g.test(file.type)){
$ips.alert('请选择图片文件上传');
uploader.cancelFile(file);
return;
}*/
//文件超过2M校验
if(file.size >= 2*1024*1024){
uploader.cancelFile(file);
file.setStatus('invalid');
var cancelList = uploader.getFiles('invalid');
var str='',
len = cancelList.length;
for(var i=0;i';
$dndDiv.html(videoDiv+'上传中'+
'取消'+
'');
$dndDiv.find('.maskbg').css('opacity',0.5);
}, options.thumbnailWidth, options.thumbnailHeight );
$imgBtn.find('.webuploader-pick').html('');
file = file;
});
//文件上传中
uploader.on( 'uploadProgress', function( file, percentage ) {
$dndDiv.find('.progressin').css('width',(percentage * 100)+"%");
console.log(percentage * 100 + '%' );
});
//上传成功
uploader.on( 'uploadSuccess', function( file, response ) {
if(response.success == true){
$dndDiv.find('.mask').hide();
var videoUrl = response.message;
$dndDiv.find('video').attr('src',videoUrl).show();
}else{
$ips.alert('上传失败,请重新选择');
$dndDiv.find('video').remove();
$dndDiv.find('.mask').hide();
$imgBtn.find('.webuploader-pick').removeClass('selected').html('点击上传');
}
});
//上传失败
uploader.on( 'uploadError', function( file ) {
$ips.alert('上传失败,请重新选择');
$dndDiv.find('video').remove();
$dndDiv.find('.mask').hide();
$imgBtn.find('.webuploader-pick').removeClass('selected').html('点击上传');
});
//上传操作完成，不分成功失败
uploader.on( 'uploadComplete', function( file ) {
if(file.statusText == 'http' || file.statusText == 'abort' || file.statusText == 'server'){
}else{
uploader.removeFile(file);
}
});
//重新上传
$dndDiv.delegate('.btnRetry','click',function(){
uploader.retry();
})
//取消上传
$dndDiv.delegate('.btnCancel','click',function(){
$dndDiv.find('video').remove();
$dndDiv.find('.mask').hide();
$imgBtn.find('.webuploader-pick').removeClass('selected').html('点击上传');
})
uploader.on('error',function(code){
if(code == 'Q_TYPE_DENIED'){
alert('请选择图片文件上传');
}
if(code == 'F_DUPLICATE'){
alert('此图片已上传');
}
if(code == 'Q_EXCEED_NUM_LIMIT'){
alert('一次最多只能上传1张图片');
}
})
$imgBtn.on('mouseover',function(){
if($dndDiv.find('video').length != 0){
$imgBtn.find('.webuploader-pick').addClass('selected').html('点击更换图片');
}
})
$imgBtn.on('mouseout',function(){
if($dndDiv.find('video').length != 0){
$imgBtn.find('.webuploader-pick').removeClass('selected').html('');
}
})
return uploader;
} jsp页面上传div
-
点击上传
注意：横屏宽高比例：3:2,竖屏宽高比例：2:3
页面js:
//上传视频
initUploader_single3('#jsUploadCard3','#jsUploadPreview3');
