ajax视频拖拽上传
来源：互联网 发布：阿里云推广 产品 编辑：程序博客网 时间：2024/05/01 15:12
1、首先创建一个index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>ajax视频拖拽上传</title> </head> <body> <div id="drop_area" style="border:3px dashed silver;width:200px; height:200px"> 将图片拖拽到此 </div> <progress value="0" max="10" id="prouploadfile"></progress> <span id="persent">0%</span> <br /> <!--<button onclick="xhr2()">ajax上传</button>--> <input type="button" onclick="stopup()" id="stop" value="上传"> <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'); 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="<img width='200px' height='200px' src='"+fileurl+"'>"; document.getElementById('drop_area').innerHTML=str; }else if(video_type.in_array(fileList[0].type)){ //如果是规定格式内的视频 var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>"; 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)<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)+"%"; } },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)<parseInt(i)){ 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<filecount){ 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 = "继续" } } </script> </body> </html> 2、在创建一个upload.php <?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 '上传完成'; } } ?> 0 0
- ajax视频拖拽上传
- 大视频ajax拖拽上传和断点上传
- ajax视频拖拽上传（完善版）
- ajax视频拖拽上传（完善版）
- 拖拽上传视频
- ajax 实现拖拽 上传
- ajax 文件拖拽上传
- ajax 上传视频 h5及时播放
- ajax文件拖拽上传 预览
- ajax视频
- 视频上传
- 视频上传
- 视频上传
- 上传视频
- 上传视频
- 视频上传
- JavaScript实现拖拽预览，AJAX小文件上传
- ajax 文件拖拽上传（小文件）
- ORB-SLAM2详解（四）跟踪
- scala枚举
- 161125
- HTML循环取JSON数组里面的数据，添加容错判断。
- 浅谈Struts2拦截器的原理与实现
- ajax视频拖拽上传
- 几年的放纵，换来的可能就是一生的卑微和坎坷。
- windows程序设计 win32 API 获取系统内存信息 GlobalMemoryStatus 和 GlobalMemoryStatusEx
- J2SE第六章——常用类(三)包装类
- xyz
- C++友元详解
- 关于3D-HEVC中的Single Depth Intra Mode以及Depth Intra Skip Mode
- All in All(字符串)
- mysql Commands out of sync
