如何上传视频及视频封面图片到指定文件夹|本地以及服务器都适用|前端后端代码|php|js|html

其他 2020-03-21 10:26:32 阅读次数: 0

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>
							&emsp;&emsp;&emsp;
							<!--选择视频-->
							<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" style="display: none;">
								<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、视频以及视频封面重新以输入的标题重新命名存储

此文章如对你有帮助点个赞哦！有疑问也可以留言共同谈论一下哦！

世界第一款
发布了31 篇原创文章 · 获赞 21 · 访问量 8414
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_42366630/article/details/103865246
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022