ajax上传.mp4文件不出错,ajax视频如何上传？-CSDN博客

使用ajax如何上传视频呢?是否了解过呢?这个功能其实在各个网站中非常的常见，通用的技术是否了解呢?希望今天小编能给你们带来帮助哦，接下来就让我们一起来了解下吧。

功能：可实现拖拽上传视频，有进度条显示，MP4格式的视频还可实现在线播放，

进行了视频上传格式限制，格式不符合有提示不能上传，大小可按情况自行添加限制

最重要的是实现了大文件断点续传的功能，更详细功能可下载后体验，就不一一赘述了

首先，创建一个index.html页面

注释代码中很详细，html代码如下：html>

ajax视频拖拽上传

将图片拖拽到此

//拖拽上传开始

//-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="";

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('可以上传');

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', 'upload.php'); //第二步骤

//发送请求

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

stopbutton.innerHTML = "暂停"

//ajax返回

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

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(i

xhr2();

}else{

alert('视频上传完成');

//location.href="文件";

}

};

//设置超时时间

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 = "继续"

}

再创建一个接收，并保存到服务器的文件upload.php

//$name=$_POST['username'];

$dir1 = iconv('UTF-8', 'gb2312//IGNORE', $_POST['filename']);

//设置文件大小不超过100MB

//$max_size=1446861248382;

//允许上传的文件扩展名

$file_type = array('.flv', '.wmv', '.rmvb', '.mp4');

$filetype = '.'.substr(strrchr($dir1, "."), 1);

if (!in_array($filetype, $file_type))

{

echo "none";

return false;

die;

}

$dir = "uploads/".md5($dir1);

file_exists($dir) or mkdir($dir, 0777, true);

$path = $dir.

"/".$_POST['blobname'];

move_uploaded_file($_FILES["file"]["tmp_name"], iconv('UTF-8', 'gb2312//IGNORE', $path));

if (isset($_POST['lastone']))

{

echo $_POST['lastone'];

$count = $_POST['lastone'];

$fp = fopen($dir1, "abw");

for ($i = 0; $i <= $count; $i++)

{

$handle = fopen($dir.

"/".$i, "rb");

fwrite($fp, fread($handle, filesize($dir.

"/".$i)));

fclose($handle);

}

fclose($fp);

if (file_exists($dir1))

{

echo '上传完成';

}

} ?

以上，就是今天小编给大家所带来的有关Java入门的知识，是否有个深刻的了解，小编的解说有没有帮到你们呢?想要了解更多知识，请继续关注本网站。