七牛上传视频

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包:

       <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>qiniu-java-sdk</artifactId>
            <version>7.2.11</version>
            <scope>compile</scope>
        </dependency> 

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<len;i++){
                   if(i==len-1){
                    str+=cancelList[i].name;
                   }else{
                    str+=cancelList[i].name+",";
                   }
                }
                $ips.alert('"'+str+'"文件超过2M不能上传');
                return;
            }         
            uploader.makeThumb( file, function( error, src ) {
                var videoDiv = '<video style="height: 150px;width: 150px;" src="'+src+'" >';
                
                $dndDiv.html(videoDiv+'<div class="mask maskbg"></div><div class="mask maskcover"><span class="status">上传中</span>'+
                    '<div class="progress"><div class="progressin" style="10%"></div><a href="javascript:" class="btnCancel">取消</a>'+
                    '<a href="javascript:" class="btnRetry" style="display:none;">重试</a></div></div>');
               $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

 <li>
	            <label class="title mark">上传视频</label>
	            <div class="info ">
		           <div class="upload-list">
						<ul>
							<li style="margin-left:-700px;padding-left:0px;height: 160px;">
								<div class="pic-area" id="jsUploadPreview3" style="width: 150px;height: 150px;"></div>
								<div class="upload-btn" id="jsUploadCard3" style="width: 150px;height: 150px;margin-left: -75px">点击上传</div>
							</li>
						</ul>
					</div>
					<div style="color: red;font-size: 15px;">注意:横屏宽高比例:3:2,竖屏宽高比例:2:3</div>
	            </div>
	         </li>

页面js:

//上传视频
initUploader_single3('#jsUploadCard3','#jsUploadPreview3');

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员雪球

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值