php文件分片上传，断点续传【实用版】

 

<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>&nbsp;</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; //'上传完成';
        }

    }
}