html mp4断点播放,html5解决大文件断点续传

Bertha 。 2022-10-07 12:48 164阅读 0赞

xhr2

将图片拖拽到此

上传

//拖拽上传开始

//-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');

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;

//拖拉图片到浏览器，可以实现预览功能

//规定视频格式

//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(fileList\[0\]);

if(fileList\[0\].type.indexOf('image') === 0)\{ //如果是图片

var str="![%22+fileurl+%22][22_fileurl_22]";

document.getElementById('drop\_area').innerHTML=str;

\}else if(video\_type.in\_array(fileList\[0\].type))\{ //如果是规定格式内的视频

var str="";

document.getElementById('drop\_area').innerHTML=str;

\}else\{ //其他格式，输出文件名

//alert("不预览");

var str="文件名字:"+fileList\[0\].name;

document.getElementById('drop\_area').innerHTML=str;

resultfile = fileList\[0\];

console.log(resultfile);

//切片计算

filesize= resultfile.size;

setsize=500\*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)

alert("已经完成");

pro.value=i+1;

persent.innerHTML="100%";

\}else\{

alert(i);

pro.value=i;

p=parseInt(i)\*100/Math.ceil(filecount)

persent.innerHTML=parseInt(p)+"%";

\},false);

//3.ajax上传

var stop=1;

function xhr2()\{

if(stop==1)\{

return false;

if(resultfile=="")\{

alert("请选择文件")

return false;

i=getCookie(resultfile.name);

console.log(i)

i = (i!=null && i!="")?parseInt(i):0

if(Math.floor(filecount)

alert("已经完成");

return false;

\}else\{

//alert(i)

var xhr = new XMLHttpRequest();//第一步

//新建一个FormData对象

var formData = new FormData(); //++++++++++

//追加文件数据

//改变进度条

pro.value=i+1;

p=parseInt(i+1)\*100/Math.ceil(filecount)

persent.innerHTML=parseInt(p)+"%";

//进度条

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('file', blobfile);

//return false;

formData.append('blobname', i); //++++++++++

formData.append('filename', resultfile.name); //++++++++++

//post方式

xhr.open('POST', 'xhr2.php'); //第二步骤

//发送请求

xhr.send(formData); //第三步骤

stopbutton.innerHTML = "暂停"

//ajax返回

xhr.onreadystatechange = function()\{ //第四步

if ( xhr.readyState == 4 && xhr.status == 200 ) \{

console.log( xhr.responseText );

if(i

xhr2();

\}else\{

i=0;

\};

//设置超时时间

xhr.timeout = 20000;

xhr.ontimeout = function(event)\{

alert('请求超时，网络拥堵！低于25K/s');

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 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()\{

if(stop==1)\{

stop = 0

xhr2();

\}else\{

stop = 1

stopbutton.innerHTML = "继续"

[22_fileurl_22]:

html mp4断点播放,html5解决大文件断点续传

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关文件断点续传

相关断点续传

相关断点续传

相关 java文件上传(分片、秒传、断点续传)——文件断点续传

相关断点续传

相关 html mp4断点播放,html5解决大文件断点续传

相关对大文件的断点续传

相关 golang socket断点续传大文件

相关断点续传文件

相关断点续传解决方案