CSS部分
.content_div_all{
width: 100%;
}
.upload_video{
background-image: url(https://www.oschina.net/img/portrait.gif);
width: 50px;
height: 55px;
background-size: 55px;
display: block;
position: absolute;
top: 88px;
left: 35px;
z-index: 999;
border: none;
}
.div_upload{
position: fixed;
background: white;
width: 70%;
height: 225px;
z-index: 3000;
left: 15%;
text-align: center;
top: 25%;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.div_upload>p{
background-color: #79ABC5;
color: white;
font-size: 17px;
}
.div_heimu{
width: 100%;
height: 100%;
background-color: rgba(6,6,0.37);
position: fixed;
top: 0;
z-index: 3001;
}
.progressbar{
width: 0%;
margin-left: 9%;
margin-top: 20px;
background-color: rgb(121,171,197);
background-image: linear-gradient(45deg,rgba(255,255,0.14902) 25%,transparent 25%,transparent 50%,0.14902) 50%,0.14902) 75%,transparent 75%,transparent);
background-size: 40px 40px;
Box-shadow: rgba(0,0.14902) 0px -1px 0px 0px inset;
Box-sizing: border-Box;
color: rgb(255,255);
display: block;
float: left;
font-size: 10px;
height: 8px;
line-height: 20px;
text-align: center;
transition-delay: 0s;
transition-duration: 0.6s;
transition-property: width;
transition-timing-function: ease;
}
.progressbar>span{
padding-top: 0px;
display: block;
font-size: 10px;
float: left;
width: 91%;
white-space: nowrap;
}
.progressbar_all{
height: 87px;
width: 85%;
}
.videoFile{
display: block;
width: 90%;
margin-left: 6%;
}
.btn_right,.btn_left{
font-size: 16px;
display: inline-block;
border: solid 1px #79ABC5;
color: #79ABC5;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
width: 30%;
}
.btn_right{
float: right;
margin-right: 27px;
}
.btn_left{
float: left;
margin-left: 27px;
}
HTML部分
<button id="upload_video" class="upload_video"></button> <div class="div_heimu" id="div_heimu" style="display:none"> <div class="div_upload"> <p>上传视频</p> <input id="videoFile" class="videoFile" type="file" name="file"/> <div class="progressbar_all" id="progressbar_all"> <p></p> <div data-percent="" id="progressbar" class="progressbar"> <span id="bfb_span"></span> </div> </div> <div class="btn_upload"> <a id="upload_video2" class="btn_left">上传</a> <a id="btn_right">关闭</a> </div> </div> </div>
JS部分
$(function(){
//显示
$('#upload_video').click(function(){
$('#div_heimu').show();
});
//隐藏
$('#btn_right').click(function(){
$('#div_heimu').hide();
});
$('#upload_video2').click(function(){
var video = $('#videoFile').get(0).files[0];
//前台check一次
if(undefined == video ){
$('#progressbar_all>p').text("请先选择视频再上传");
setTimeout(function() {$('#progressbar_all>p').text("")},2000);
}else{
var formData = new FormData();
var getjsfile = $('#getjsfile').val();
formData.append('file',video);
var videoName = video.name;//文件名
var videoSize = video.size;//文件大小
var xianzhiSize = 1024*1024*100; //限制100M
var videoNameArr = videoName.split('.');
var houzhui = videoNameArr[videoNameArr.length-1].toUpperCase();
if(houzhui == "MP4"|| houzhui == "MPEG"|| houzhui == "RMVB"|| houzhui == "AVI"|| houzhui == "MOV"){
if(videoSize>xianzhiSize){
$('#progressbar_all>p').text("文件超过限制大小，请上传小于"+(xianzhiSize/1000/1000)+"M的文件");
setTimeout(function() {$('#progressbar_all>p').text("")},2000);
}else{
$('#progressbar_all>p').text('');
$.ajax({
url: getjsfile,type: 'POST',data: formData,dataType: 'json',contentType: false,processData: false,xhr: function(){
//取得xmlhttp异步监听
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener('progress',onprogress,false);
return xhr;
}
},success: function (returndata) {
//成功回调
var data = returndata['fileinfo'];
if(data == false){
$('#progressbar').css('width','0%');
$('#bfb_span').text('');
$('#progressbar_all>p').text(returndata['msg']);
setTimeout(function() {$('#progressbar_all>p').text("")},2000);
}else{
var video_new = getVideoHtml(data['file']['savename']);
ue.setContent(video_new,true);
$('#progressbar').css('width','0%');
$('#bfb_span').text('');
hide_upload();
}
},error: function (returndata){
$('#progressbar').css('width','0%');
$('#bfb_span').text('');
$('#progressbar_all').html('<p>上传过程中发生未知错误，请重新上传</p>');
}
});
}
}else{
$('#progressbar_all>p').text("文件格式不正确！");
setTimeout(function() {$('#progressbar_all>p').text("")},2000);
}
}
});
function onprogress(evt){
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
$('#bfb_span').html( per +'%'+'('+loaded+'/'+tot+')' );
$('#progressbar').css('width',per +'%');
}
function getVideoHtml (filename) {
var dateTime = new Date();
var getTimeYM = dateTime.Format("yyyy-MM")+'/';
var getTimeYMD = dateTime.Format("yyyy-MM-dd")+'/';
var srcHtml = 'http://xxxxxxxx.oss-cn-shanghai.aliyuncs.com/'+getTimeYM+getTimeYMD+filename;
var contentHtml = "";
contentHtml += '<p style="text-align:center;">';
contentHtml += '<video width="80%" height="250px" controls="controls">';
contentHtml += '<source src="'+srcHtml+'" type="video/mp4"/> ';
contentHtml += '</video>';
contentHtml += '</p>';
return contentHtml;
}
//格式年月日
Date.prototype.Format = function(fmt) {
var o = {
"M+": this.getMonth() + 1,//月份
"d+": this.getDate(),//日
"h+": this.getHours(),//小时
"m+": this.getMinutes(),//分
"s+": this.getSeconds(),//秒
"q+": Math.floor((this.getMonth() + 3) / 3),//季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1,(this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1,(RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
}); 原文链接：https://www.f2er.com/ajax/161058.html