1、前端代码
<div id="content">
<div>
<p class="_p">
<span>视频标题:</span>
<input id="title" type="text" class="form-control" placeholder="请输入视频名称">
</p>
<!--文件选择按钮-->
<!--选择封面-->
<a class="list" href="javascript:;">
<input id="picture" type="file" name="picture" onchange="Upladpicture()" class="btn btn-default" /><span>选择封面</span>
</a>
<!--选择视频-->
<a class="list" href="javascript:;">
<input id="file" type="file" name="myfile" onchange="UpladFile()" class="btn btn-default" /><span>选择视频</span>
</a>
<br /><br /><br />
<!--上传速度显示-->
<span id="time"></span>
</p>
<br />
<ul class="el-upload-list el-upload-list--text" style="display: none;">
<li tabindex="0" class="el-upload-list__item is-success">
<a class="el-upload-list__item-name">
<i class="el-icon-document"></i><span id="pictureName"></span>
</a>
<label class="el-upload-list__item-status-label">
<i class="el-icon-upload-success el-icon-circle-check"></i>
</label>
<i class="el-icon-close" onclick="del();"></i>
<i class="el-icon-close-tip"></i>
</li>
</ul>
<!--显示消失-->
<ul class="el-upload-list el-upload-list--text" style="display: none;">
<li tabindex="0" class="el-upload-list__item is-success">
<a class="el-upload-list__item-name">
<i class="el-icon-document"></i><span id="videoName"></span>
</a>
<label class="el-upload-list__item-status-label">
<i class="el-icon-upload-success el-icon-circle-check"></i>
</label>
<i class="el-icon-close" onclick="del();"></i>
<i class="el-icon-close-tip"></i>
</li>
</ul>
<!--进度条-->
<div class="el-progress el-progress--line" >
<div class="el-progress-bar">
<div class="el-progress-bar__outer" style="height: 6px;">
<div class="el-progress-bar__inner" style="width: 0%;">
</div>
</div>
</div>
<div class="el-progress__text" style="font-size: 14.4px;">0%</div>
</div>
<br />
<!-- <br /> -->
<p class="_p"> <button class="div" type="button" onclick="sub();">上传</button></p>
<!--预览框-->
<div class="preview">
</div>
</div>
</div>
</ul>
</div>
2、CSS样式
**************************
视频上传
**************************
*/
#content{margin:0 auto;}
.list {top: 15px;width: 140px;height: 40px; border:1px solid #c2c2c2; display:inline-block;border-radius: 2px;position: relative; line-height: 40px;}
#file{position: absolute;opacity: 0;color:white;width: 100%;height: 100%;z-index: 100;}
#picture{position: absolute;opacity: 0;color:white;width: 100%;height: 100%;z-index: 100;}
.list span{
display: inline-block;
text-align: center;
width: 100%;
line-height: 40px;
/* color: #0082E6; */
color:#000000;
}
video{
margin-top: 8px;
border-radius: 4px;
}
._p{
margin: 14px;
}
._p input{
display: inline-block;
width: 50%;
margin-left: 6px;
}
._p span{
font-size: 15px;
}
.div { /* 按钮美化 */
width: 270px; /* 宽度 */
height: 40px; /* 高度 */
border-width: 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
/* background: #1E90FF; */ /* 背景颜色 */
background:#000000;
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 17px; /* 字体大小 */
}
.div:hover { /* 鼠标移入按钮范围时改变颜色 */
background: #5599FF;
}
3、JS
var xhr;//异步请求对象
var ot; //时间
var oloaded;//大小
//上传文件方法
function UpladFile() {
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
if(fileObj.name){
$(".el-upload-list").css("display","block");
$(".el-upload-list li").css("border","1px solid #20a0ff");
$("#videoName").text(fileObj.name);
}
else{
alert("请选择文件");
}
}
function Upladpicture() {
var pictureObj = document.getElementById("picture").files[0]; // js 获取文件对象
if(pictureObj.name){
$(".el-upload-list").css("display","block");
$(".el-upload-list li").css("border","1px solid #20a0ff");
$("#pictureName").text(pictureObj.name);
}
else{
alert("请选择文件");
}
}
function sleep(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}
/*点击取消*/
function del(){
$("#file").val('');
$(".el-upload-list").css("display","none");
}
/*点击提交*/
function sub(){
console.log("sub");
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
if(fileObj==undefined||fileObj==""){
alert("请选择文件");
return false;
};
var pictureObj = document.getElementById("picture").files[0]; // js 获取文件对象
if(pictureObj==undefined||pictureObj==""){
alert("请选择封面");
return false;
};
var title = $.trim($("#title").val());
if(title==''){
alert("请填写视频标题");
return false;
}
var url = "upload.php"; // 接收上传文件的后台地址
console.log(url);
console.log("111");
var form = new FormData(); // FormData 对象
form.append("mf", fileObj); // 文件对象
form.append("title", title); // 标题
form.append("picture", pictureObj); // 封面
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
xhr.onload = uploadComplete; //请求完成
xhr.onerror = uploadFailed; //请求失败
xhr.upload.onprogress = progressFunction; //【上传进度调用方法实现】
xhr.upload.onloadstart = function() { //上传开始执行方法
ot = new Date().getTime(); //设置上传开始时间
oloaded = 0; //设置上传开始时,以上传的文件大小为0
};
console.log("111");
xhr.send(form); //开始上传,发送form数据
}
//上传进度实现方法,上传过程中会频繁调用该方法
function progressFunction(evt) {
// event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0
if(evt.lengthComputable) {
$(".el-progress--line").css("display","block");
/*进度条显示进度*/
$(".el-progress-bar__inner").css("width", Math.round(evt.loaded / evt.total * 100) + "%");
$(".el-progress__text").html(Math.round(evt.loaded / evt.total * 100)+"%");
}
var time = document.getElementById("time");
var nt = new Date().getTime(); //获取当前时间
var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差,单位为s
ot = new Date().getTime(); //重新赋值时间,用于下次计算
var perload = evt.loaded - oloaded; //计算该分段上传的文件大小,单位b
oloaded = evt.loaded; //重新赋值已上传文件大小,用以下次计算
//上传速度计算
var speed = perload / pertime; //单位b/s
var bspeed = speed;
var units = 'b/s'; //单位名称
if(speed / 1024 > 1) {
speed = speed / 1024;
units = 'k/s';
}
if(speed / 1024 > 1) {
speed = speed / 1024;
units = 'M/s';
}
speed = speed.toFixed(1);
//剩余时间
var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
time.innerHTML = '上传速度:' + speed + units + ',剩余时间:' + resttime + 's';
if(bspeed == 0)
time.innerHTML = '上传已取消';
}
//上传成功响应
function uploadComplete(evt) {
//服务断接收完文件返回的结果 注意返回的字符串要去掉双引号
if(evt.target.responseText){
var str = ""+evt.target.responseText;
alert("上传成功!");
//$(".preview").append("<video controls='' autoplay='' name='media'><source src="+str+" type='video/mp4'></video>");
}
else{
alert("上传失败");
}
}
//上传失败
function uploadFailed(evt) {
alert("上传失败!");
}
4、upload.php
<?php
global $_W;
global $_GPC;
$fileArr = $_FILES['mf']; //获取文件
$title = $_POST['title']; //获取标题
$pictureArr = $_FILES['picture']; //获取标题
//设置预览目录,上传成功的路径
$previewPath = "";
//封面
$pext = pathinfo($pictureArr['name'], PATHINFO_EXTENSION);//获取当前上传文件扩展名
$pExt ='jpg';
if($pext!=$pExt) {
exit(json_encode(-1,JSON_UNESCAPED_UNICODE));//视/音频或采用了不合适的扩展名!
}
else {
//文件上传到预览目录
// $previewName = 'pre_'.md5(mt_rand(1000,9999)).time().'.'.$ext; //封面重命名
$picpreviewName = $title.'.'.$pext; //封面重命名
$picpreviewSrc = $previewPath.$picpreviewName;
if(move_uploaded_file($pictureArr['tmp_name'],$picpreviewSrc)){//上传文件操作,上传失败的操作
//exit($picpreviewName);
//视频
$ext = pathinfo($fileArr['name'], PATHINFO_EXTENSION);//获取当前上传文件扩展名
$arrExt = array('3gp','rmvb','flv','wmv','avi','mkv','mp4','mp3','wav',);
if(!in_array($ext,$arrExt)) {
exit(json_encode(-1,JSON_UNESCAPED_UNICODE));//视/音频或采用了不合适的扩展名!
}
else {
//文件上传到预览目录
// $previewName = 'pre_'.md5(mt_rand(1000,9999)).time().'.'.$ext; //文件重命名
$previewName = $title.'.'.$ext; //文件重命名
$previewSrc = $previewPath.$previewName;
if(move_uploaded_file($fileArr['tmp_name'],$previewSrc)){//上传文件操作,上传失败的操作
exit($previewName);
}
else {
//上传成功的失败的操作
exit(json_encode(0,JSON_UNESCAPED_UNICODE));
}
}
}
else {
//上传成功的失败的操作
exit(json_encode(0,JSON_UNESCAPED_UNICODE));
}
}
?>
说明:
1、视频以及视频封面是上传到当前目录中
2、视频以及视频封面重新以输入的标题重新命名存储