一、你得有个layui框架的js包
layui框架地址为：https://www.layui.com/doc/
当然如果想使用我的情到这里下载，里面我做了一些修改，体验好一点吧：链接：https://pan.baidu.com/s/1Egb5lPW1d6ocUDW9BAsZOg
提取码：sdou
二、然后建立个html文本吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
.content-div {
width: 90%;
position: absolute;
margin: 25px
}
/*.invisible {visibility:hidden}*/
/*.visible {visibility:visible}*/
.inhidden {
display: none
}
.visible {
display: block
}
</style>
</head>
<body>
<div class="content-div">
<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-upload-drag" id="selectFile">
<i class="layui-icon"></i>
<p>点击上传，或将文件拖拽到此处</p>
</div>
<button type="button" class="layui-btn inhidden" id="uploadBtn">上传视频</button>
</div>
</div>
<video id="videoattr" width="250" height="100" style="margin-left: 80px;" class="inhidden"></video>
<div class="layui-form-item layui-form-text inhidden" id="progressDiv">
<label class="layui-form-label">上传进度</label>
<div class="layui-input-block" style="padding-top: 18px">
<div class="layui-progress" lay-showPercent="yes" lay-filter="progressBar">
<div class="layui-progress-bar" lay-percent="0%"></div>
</div>
<div class="layui-form-mid layui-word-aux inhidden" id="notice" style="color: red !important;">上传成功</div>
</div>
</div>
<div class="layui-form-item inhidden">
<div class="layui-input-block">
<input type="text" name="height" id="videoHeight" class="layui-input">
<input type="text" name="width" id="videoWidth">
<input type="text" name="playTime" id="playTime">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*" id="submitForm">立即提交</button>
</div>
</div>
</form>
</div>
<script src="./layui/layui.js"></script>
<script src="./js/jquery-3.2.0.js"></script>
<script>
layui.use(['form', 'upload', 'layer', 'element'], function () {
var form = layui.form
, $ = layui.jquery
, layer = layui.layer
, element = layui.element
, upload = layui.upload;
//拖拽上传
var flag = false;
upload.render({
elem: '#selectFile'
, url: '/upload_file'
, accept: 'video'
, exts: 'mp4'
, method: 'post'
, auto: false
, bindAction: '#uploadBtn' //指向一个按钮触发上传
, progress: function (e, percent) {
element.progress('progressBar', percent + '%');
}
, choose: function (obj) {
var load=layer.load(2, {
shade: [0.4, '#393D49']
})
obj.preview(function (index, file, res) {
if (file.size > 0) {// 判断文件大小
flag = true;
layer.alert("Wait for me to disappear, forget I can be good");// 此段话，用来拖延用户点击提交按钮的时间，因为不知道covers是否返回
}
var url = URL.createObjectURL(file);//把file转成URL
$('#videoattr').attr('src', url); //视频链接
var timer = setTimeout(function () {
layer.close(load);
$('#uploadBtn').removeClass('inhidden'); //一开始先将确认上传按钮隐藏，得到视频时长后才开放
$('#videoattr').removeClass('inhidden');
$('#progressDiv').removeClass('inhidden');
clearTimeout(timer);
}, 1000);
// console.log(url);
})
}
, before: function (obj) {
var video_time = document.getElementById("videoattr").duration;//视频时长
var time_length = Math.ceil(video_time);//转为整型
var videoHeight = document.getElementById("videoattr").videoHeight;
var videoWidth = document.getElementById("videoattr").videoWidth;
// this.data = {videoHeight:videoHeight,videoWidth:videoWidth,time_length: time_length};//动态改变传的参数
$('#videoHeight').val(videoHeight);
$('#videoWidth').val(videoWidth);
$('#playTime').val(time_length);
}
, done: function (res) {
if (res.code > 0) {
layer.msg("上传失败", {icon: 5})
} else {
$('#notice').removeClass('inhidden')
// $('#uploadBtn').addClass('invisible');
}
console.log(res)
}
});
});
</script>
</body>
</html>