<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script><ul style="padding:0; margin: 0; list-style-type:none; color: #CC0000;">
<li style="border: 1px solid #CC0000; background: #FFFFCC; padding: 10px; margin-bottom: 5px;"></li>
</ul>
<style>
.addvideo{float: right; background: #2fa8ff; height: 35px; line-height: 35px; padding:0px 10px;}
.addvideo a{color: #ffffff;}
.videotile{height: 40px; line-height: 40px; background: #f1f1f1; padding-left: 10px;}
.videotime1{width: 50px; margin-left: 10px;}
.videosort{float: right;}
.videoinfo,.videopic{float: left;}
.videopic{margin-right: 20px; width: 150px; height: auto;}
#tabbody-div{border: none;}
.videotl{height: 40px; line-height: 40px; font-size: 18px; border-bottom: 1px solid #f1f1f1; padding-left: 10px; margin-bottom: 20px;}
#stop{ width: 200px;border: 1px solid #0085ff;
color: #FFF;
background: rgba(0, 132, 255, .8);}
input[type='text']{height: 35px; line-height: 35px;}
#tabbody-div{width: 100%; height: 340px; overflow-y: auto;}
.videofoot{width: 100%; height: 40px; line-height: 40px; border-top:1px solid #f1f1f1;}
.tab-div{height: 500px; overflow: hidden;}
body{padding: 0px; margin:0px;}
.videofoot input{float: right; height: 30px; line-height: 30px; margin: 5px 10px;background: rgba(0, 132, 255, .8); border: none; color: #ffffff;}
.videonav{width:90%; text-align: center; height: 40px; line-height: 40px; list-style: none;}
.videonav li{width: 50%; float: left; color: #cccccc; border-bottom: 2px solid #f1f1f1;}
.videonav li a{display: block; width: 100%; height: 100%; color: #cccccc; text-decoration: none;}
.videonav li.sel{border-bottom: 2px solid #0085ff; color:#0085ff;}
.videonav li.jiantou{width: 10%; font-size: 24px; font-family: "Microsoft YaHei", '微软雅黑';}
.tab-div{ width: 100%; height:100%; position: fixed; z-index: 3000; left: 0px;
top:0px; background:rgba(0,0,0,0.5);}
.tab-div form{width: 800px; height: 500px; margin: 0px auto; margin-top: 5%; border:1px solid #cccccc; background: #ffffff;/*box-shadow: 0px 1px 10px #2fa8ff; border-radius:1%; */}
/*.tab-div form iframe{border-radius:1%;}*/
#file{border:3px dashed #f1f1f1;width:200px; padding: 10px;}
#video-table{font-size: 12px;}
#video-table tr td{padding: 5px 0px;}
.videoup1{width: 15%;}
#videoimg{width: 60px; height: 40px; background: #F1F1F1; border: 1px dashed #cccccc; display: block;}
#videoimg img{width: 100%; height: 100%;}
#video_tip{color: #00A000;}
</style>
<!-- start goods form -->
<div class="tab-div">
<form enctype="multipart/form-data" action="" method="post" name="theForm">
<input type="hidden" name="goods_id" id="goods_id" value="1101" />
<input type="hidden" name="videoid" id="videoid" value="0" />
<div class="videotl">添加课程（课程可以添加多个）</div>
<!--<ul class="videonav"><li class="sel">❶视频上传<span>></span></li><li> </li></ul>-->
<ul class="videonav"><li class="sel">❶视频上传<span>></span></li><li>❷视频压缩</li></ul>
<!-- tab body -->
<div id="tabbody-div">
<!-- 最大文件限制 -->
<input type="hidden" name="MAX_FILE_SIZE" value="2097152" />
<!-- 通用信息 -->
<table width="90%" id="video-table" align="center">
<tr>
<td class="videoup1">视频标题：<font color="red">*</font></td>
<td><input name="title" id="title" type="text" value="" placeholder="请输入视频名称"></td>
</tr>
<tr>
<td class="videoup1">选择视频：<font color="red">*</font></td>
<td><input type="file" name="file" id="file" onchange="uploadvideo()"><span></span></td>
</tr>
<tr>
<td class="videoup1">上传进度：</td>
<td><progress value="0" max="10" id="prouploadfile"></progress>
<span id="persent">0%</span>
</td>
</tr>
<tr>
<td class="videoup1">缩略图：</td>
<td>系统自动截图</td>
</tr>
<tr>
<td class="videoup1">视频时长：</td>
<td>系统自动获取</td>
</tr>
<!--<tr>
<td class="videoup1">是否压缩：</td>
<td><label><input type="radio" name="yasuo" id="yasuo" value="0" checked>否</label><label><input type="radio" name="yasuo" value="1">是</label>
</td>
</tr>-->
<tr>
<td class="videoup1">视频发布：</td>
<td><label><input type="radio" name="state" id="state" value="0" checked>否</label><label><input type="radio" name="state" value="1" >是</label>
</td>
</tr>
<tr>
<td class="videoup1"></td>
<td><input type="button" onclick="stopup()" id="stop" value="上传"><span id="video_tip"></span>
<script>
//拖拽上传开始
//-1.禁止浏览器打开文件行为
/*document.addEventListener("drop",function(e){ //拖离
e.preventDefault();
})
document.addEventListener("dragleave",function(e){ //拖后放
e.preventDefault();
})
document.addEventListener("dragenter",function(e){ //拖进
e.preventDefault();
})
document.addEventListener("dragover",function(e){ //拖来拖去
e.preventDefault();
})*/
//上传进度
var pro = document.getElementById('prouploadfile');
var persent = document.getElementById('persent');
var goods_id=document.getElementById('goods_id');
var videoid=document.getElementById('videoid');
function clearpro(){
pro.value=0;
persent.innerHTML="0%";
}
//2.拖拽
var stopbutton = document.getElementById('stop');
var resultfile="";
/*var box = document.getElementById('drop_area'); //拖拽区域
box.addEventListener("drop",function(e){
var fileList = e.dataTransfer.files; //获取文件对象
//console.log(fileList);
//检测是否是拖拽文件到页面的操作
if(fileList.length == 0){
return false;
}
//判断文件大小
var num=1048576;
var cha=Math.ceil(resultfile.size)/num;
if(cha>200)
{
alert(Math.ceil(resultfile.size/num));
var str="<font color='red'>请选取文件在200M以下的视频</font>";
document.getElementById('drop_area').innerHTML=str;
return false;
}
//拖拉图片到浏览器，可以实现预览功能
//规定视频格式
//in_array
Array.prototype.S=String.fromCharCode(2);
Array.prototype.in_array=function(e){
var r=new RegExp(this.S+e+this.S);
return (r.test(this.S+this.join(this.S)+this.S));
};
var video_type=["video/mp4","video/ogg"];
//创建一个url连接,供src属性引用
var fileurl = window.URL.createObjectURL(resultfile);
//alert(fileurl);
if(resultfile.type.indexOf('image') === 0){ //如果是图片
var str="<img width='200px' height='200px' src='"+fileurl+"'>";
document.getElementById('drop_area').innerHTML=str;
}else if(video_type.in_array(resultfile.type)){ //如果是规定格式内的视频
var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";
document.getElementById('drop_area').innerHTML=str;
}else{ //其他格式，输出文件名
//alert("不预览");
var str="文件名字:"+resultfile.name;
document.getElementById('drop_area').innerHTML=str;
}
resultfile = resultfile;
console.log(resultfile);
//切片计算
filesize= resultfile.size;
setsize=5*1024*1024;
filecount = filesize/setsize;
//console.log(filecount)
//定义进度条
pro.max=parseInt(Math.ceil(filecount));
i =getCookie(resultfile.name);
i = (i!=null && i!="")?parseInt(i):0;
if(Math.floor(filecount)<i){
alert("已经完成");
pro.value=i+1;
persent.innerHTML="100%";
}else{
alert('可以上传');
pro.value=i;
p=parseInt(i)*100/Math.ceil(filecount)
persent.innerHTML=parseInt(p)+"%";
//取第一帧保存为图片
$output = $("#output");
video = $("#video");
}
},false);*/
var setsize=0;
var filecount=0;
var filesize=0;
function uploadvideo(){
//resultfile=document.getElementById('file');
resultfile=document.getElementById('file').files[0];
//判断文件大小
var num=1048576;
var cha=Math.ceil(resultfile.size)/num;
if(cha>200)
{
alert(Math.ceil(resultfile.size/num));
var str="<font color='red'>请选取文件在200M以下的视频</font>";
document.getElementById('drop_area').innerHTML=str;
return false;
}
//拖拉图片到浏览器，可以实现预览功能
//规定视频格式
//in_array
Array.prototype.S=String.fromCharCode(2);
Array.prototype.in_array=function(e){
var r=new RegExp(this.S+e+this.S);
return (r.test(this.S+this.join(this.S)+this.S));
};
var video_type=["video/mp4","video/ogg"];
//切片计算
filesize= resultfile.size;
setsize=1*1024*1024;
filecount = filesize/setsize;
//console.log(filecount)
//定义进度条
pro.max=parseInt(Math.ceil(filecount));
clearCookie(resultfile.name);
i =getCookie(resultfile.name);
i = (i!=null && i!="")?parseInt(i):0;
if(Math.floor(filecount)<i){
alert("已经完成");
pro.value=i+1;
persent.innerHTML="100%";
}else{
alert('可以上传');
pro.value=i;
p=parseInt(i)*100/Math.ceil(filecount)
persent.innerHTML=parseInt(p)+"%";
}
}
//3.ajax上传
var stop=1;
function xhr2(){
if(stop==1){
return false;
}
if(resultfile==""){
alert("请选择文件")
return false;
}
i=getCookie(resultfile.name);
i = (i!=null && i!="")?parseInt(i):0
if(Math.floor(filecount)<parseInt(i)){
alert("已经完成");
return false;
}else{
//alert(i)
}
var xhr = new XMLHttpRequest();//第一步
//console.log(xhr);
//新建一个FormData对象
var formData = new FormData(); //++++++++++
//追加文件数据
//改变进度条
pro.value=i+1;
p=parseInt(i+1)*100/Math.ceil(filecount)
persent.innerHTML=parseInt(p)+"%";
//进度条
//console.log(resultfile);
if((filesize-i*setsize)>setsize){
blobfile= resultfile.slice(i*setsize,(i+1)*setsize);
}else{
//最后分片
blobfile= resultfile.slice(i*setsize,filesize);
formData.append('lastone', Math.floor(filecount));
formData.append('title', $("#title").val());
formData.append('yasuo', $("input[name='yasuo']:checked").val());
formData.append('state', $("input[name='state']:checked").val());
$("#video_tip").html("进入视频处理阶段，请耐心等待……");
}
//console.log(videoid.value);
formData.append('videoid', videoid.value);
formData.append('file', blobfile);
formData.append('goods_id', goods_id.value);
//return false;
formData.append('blobname', i); //++++++++++
formData.append('filename', resultfile.name); //++++++++++
//post方式
xhr.open('POST', 'video.php?act=upload'); //第二步骤
//发送请求
xhr.send(formData); //第三步骤
stopbutton.innerHTML = "暂停"
//ajax返回
xhr.onreadystatechange = function(){ //第四步
console.log(i);
console.log(filecount);
if ( xhr.readyState == 4 && xhr.status == 200 ) {
//console.log( xhr.responseText );
if(xhr.responseText=="none"){
alert("视频格式不支持");
persent.innerHTML="0%";
document.getElementById("drop_area").innerHTML="支持视频格式为'.flv' ,'.rmvb' , '.mp4'";
pro.value=0;
return false;
}else if(xhr.responseText==1){
alert("上传视频失败！参数错误");
persent.innerHTML="0%";
//document.getElementById("drop_area").innerHTML="支持视频格式为'.flv' ,'.rmvb' , '.mp4'";
pro.value=0;
return false;
}else if(i<filecount){
xhr2();
}else{
//alert(xhr.responseText+"上传完成！");
alert("上传完成！");
$("#video_tip").html("操作成功！");
clearCookie(resultfile.name);
window.location.reload();
}
}
};
//设置超时时间
//xhr.timeout = 20000;
xhr.ontimeout = function(event){
alert('请求超时，网络拥堵！低于25K/s');
}
//captureImage($("#video").get(0));
i=i+1;
setCookie(resultfile.name,i,365)
}
//设置cookie
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/")
}
//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}
//获取cookie
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function stopup(){
//alert(resultfile.size);
if(stop==1){
stop = 0;
if(resultfile=="" && videoid.value!=""){
$("form[name='theForm']").submit();
}else{
xhr2();
}
}else{
stop = 1
stopbutton.innerHTML = "继续"
}
}
</script></td>
</tr>
</table>
<div class="button-div">
</div>
<input type="hidden" name="act" value="videoadd" />
</div>
<div class="videofoot" style="display: none;"><input id="goods_info_submit" type="submit" value="下一步" class="button" /></div>
</form>
</div>
elseif ($_REQUEST['act'] == 'upload')
{
//echo "aaaaa"; exit();
$goods_id=isset($_REQUEST['goods_id'])?intval($_REQUEST['goods_id']):0;
$video_id=isset($_REQUEST['videoid'])?intval($_REQUEST['videoid']):0;
if($goods_id==0 && $video_id==0){
echo 1;
exit;
}
// $sql="SELECT goods_video FROM ".$ecs->table("goods")." WHERE goods_id=".$goods_id;
//
// $sql1="SELECT goods_name FROM ".$ecs->table("goods")." WHERE goods_id=".$goods_id;
//$yuan=iconv('UTF-8','gb2312//IGNORE',$db->getOne($sql));//通过商品id 查询该商品的视频
//$goods_name=$db->getOne($sql1);
//$yuan_dir="uploads/";//获得文件断点续传储存路径
$dir1=iconv('UTF-8','gb2312//IGNORE',$_POST['filename']);//用于中文转码
//ignore的意思是忽略转换时的错误，如果没有ignore参数，所有该字符后面的字符串都无法被保存
//允许上传的文件扩展名
$file_type = array( '.flv' ,'.rmvb' , '.mp4' );
$filetype='.'.substr(strrchr($dir1, "."),1);//截取获得文件后缀名
if(!in_array($filetype,$file_type))
{
echo "none";
return false;
die;
}
$basedir="..";
//$dir2=$name.'video_'.time().$filetype;
$dir="/uploads/".md5($dir1);
//还原文件原名
file_exists($basedir.$dir) or mkdir($basedir.$dir,0777,true);
$path=$basedir.$dir."/".$_POST['blobname'];
//$sql="UPDATE ".$ecs->table('lesson_goods')." SET goods_video='".$dir2."' WHERE goods_id=".$goods_id;
//echo $sql;die;
move_uploaded_file($_FILES["file"]["tmp_name"],iconv('UTF-8','gb2312//IGNORE',$path));
if(isset($_POST['lastone'])){
$title=isset($_POST['title'])?$_POST['title']:"";
$yasuo=isset($_POST['yasuo'])?intval($_POST['yasuo']):0;
$state=isset($_POST['state'])?intval($_POST['state']):0;
//exit();
$name="/uploadsvideo/video/".date('Ymd',time()).time()."/";
if(!is_dir($basedir.$name)){
mkdir($basedir.$name);
}
$dir2=$name.'video'.$filetype;
//var_dump($_POST['videoid']);
$count=$_POST['lastone'];
if(!file_exists($basedir.$name)){mkdir($basedir.$name,0777,true);}
$fp = fopen($basedir.$dir2,"abw");
for($i=0;$i<=$count;$i++){
$handle = fopen($basedir.$dir."/".$i,"rb");
fwrite($fp,fread($handle,filesize($basedir.$dir."/".$i)));
fclose($handle);
@unlink($basedir.$dir."/".$i);
}
fclose($fp);
rmdir($basedir.$dir);
$video_url="";
$sql="";
//通过文件是否存在 判断是否上传完成
if(file_exists($basedir.$name))
{
echo $dir2; //'上传完成';
}
}
}
DEMO下载地址：https://dwz.cn/fgXtRtnu