<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#loadingBar{
margin-top: 14px;
width: 320px;
height: 12px;
border-radius: 12px;
background: #eee;
}
#loadingBar span{
display: inline-block;
height: 12px;
background: red;
border-radius: 12px;
}
</style>
</head>
<body>
<div class="" style="margin-bottom: 14px;">
<input type="file" accept="video/*" id="videoForm" capture="camcorder">
<button class="upload">上传</button>
<div id="loadingBar">
<span>
<strong></strong>
<i></i>
</span>
</div>
</div>
<video width="320" height="" src="" autoplay="" class="vd" controls="controls">
当前浏览器不支持 video直接播放
</video>
<script src="./js/common/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var xhrOnProgress=function(fun) {
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
$(".upload").click(function(){
//发送视频请求
var formData = new FormData();
// console.log($('#videoForm')[0].files[0])
formData.append('file', $('#videoForm')[0].files[0]);
$.ajax({
url: '/putFile',
type: 'POST',
cache: false,
data: formData,
processData: false,
dataType:'json',
contentType: false,
//利用progress监控进度
xhr:xhrOnProgress(function(e){
var percent = Math.round(e.loaded*100 / e.total)+'%'
$('#loadingBar').find('span').css('width',percent);
$('#loadingBar span').find('strong').html(percent);
$('#loadingBar span').find('i').html('已上传'+((e.loaded/1024/1024).toFixed(1))+'MB/'+((e.total/1024/1024).toFixed(1))+'MB');
})
}).done(function(res) {
$(".vd").attr('src','http://192.168.1.138:8080/ja_file'+res.url)
}).fail(function(res) {
console.log('res',res);
});
})
</script>
</body>
</html>
视频上传demo
猜你喜欢
转载自blog.csdn.net/yahooG/article/details/86570735
今日推荐
周排行