AJAX上传视频带进度条，上传成功之后回显

代码粗糙，提供一个思路而已，别较真，创建一个HTML页，将代码块复制粘贴进去就能使用

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;
		}
	});