大视频ajax拖拽上传和断点上传

最新推荐文章于 2024-05-17 15:28:29 发布
最新推荐文章于 2024-05-17 15:28:29 发布
阅读量3.8w 收藏
点赞数 1
分类专栏： php 文章标签： 断点上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suiyueweinitingliu/article/details/52191167
版权 
  
  

   
   html文件
<!DOCTYPE html>
  
  

  
  

   
   <html>
  
  

  
  

   
   	<head>
  
  

  
  

   
   		<meta charset="UTF-8"/>
  
  

  
  

   
   		<title>xhr2</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 οnclick="xhr2()">ajax上传</button>-->	
  
  

  
  

   
   		<button οnclick="stopup()" id="stop">上传</button>	
  
  

  
  

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

  
  

   
   				//发送请求
  
  

  
  

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

  
  

   
   				stopbutton.innerHTML = "暂停"
  
  

  
  

   
   				//ajax返回
  
  

  
  

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

  
  

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

  
  

   
   			　　　　　　console.log( xhr.responseText );
  
  

  
  

   
   						if(i<filecount){
  
  

  
  

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

  
  
				
  
  

  
  

   
   			}
  
  

  
  
			
  
  

  
  

   
   		}
  
  

  
  

   
   		</script>
  
  

  
  

   
   	</body>
  
  

  
  

   
   </html>



php文件

<?php
//$name=$_POST['username'];
$dir = $_POST [ 'filename' ];
$dir = "uploads/" . md5 ( $dir );
file_exists ( $dir ) or mkdir ( $dir , 0777 , true );


$path = $dir . "/" . $_POST [ 'blobname' ];


//print_r($_FILES["file"]);
move_uploaded_file ( $_FILES [ "file" ][ "tmp_name" ], $path );

if ( isset ( $_POST [ 'lastone' ])){
echo $_POST [ 'lastone' ];
$count = $_POST [ 'lastone' ];
$fp = fopen ( $_POST [ 'filename' ], "abw" );
for ( $i = 0 ; $i <= $count ; $i ++ ){
$handle = fopen ( $dir . "/" . $i , "rb" );
fwrite ( $fp , fread ( $handle , filesize ( $dir . "/" . $i )));
fclose ( $handle );
}
fclose ( $fp );
}
?>

suiyueweinitingliu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
文件上传漏洞
qq_45590470的博客
09-25 1094
upload-labs
ajax文件上传插件，支持拖拽
10-31
"ajax文件上传插件，支持拖拽" 提供了一种高效、友好的解决方案，它利用Ajax技术实现异步文件上传，同时支持文件的拖放操作，极大地提升了用户体验。下面将详细介绍这个插件的关键知识点。 1. **Ajax文件上传**： ...
C#向窗体中拖放图片并显示
03-16
C#将图片拖放窗口中并显示，向窗体中拖放图片并显示，using System.IO;//添加的命名空间，对文件进行操作 　　using System.Threading;//线程序的命名空间，向TreeView控件添加被拖放的文件夹目录，获取拖放文件夹的目录，new Thread(new ThreadStart(SetAddFile)); //创建一个线程，thdAddFile.Start(); //执行当前线程，判断所指的文件或文件夹是否存在，对单个FileSystemInfo进行判断,如果是文件夹则进行递归操作，如果是文件的话，进行文件的复制操作。 运行环境：Visual Studi
html5解决大文件断点续传
张erdan的博客
01-25 9030
js代码 xhr2 将图片拖拽到此 0% ajax上传--> 上传 //拖拽上传开始 //-1.禁止浏览器打开文件行为 document.addEventListener("drop",function(e){ //拖离 e.preventDefault(); }) doc
HTML5 大文件断点续传完整思路整理
weixin_45525177的博客
10-14 136
参考文章：http://blog.ncmem.com/wordpress/2023/10/14/html5-%e5%a4%a7%e6%96%87%e4%bb%b6%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0%e5%ae%8c%e6%95%b4%e6%80%9d%e8%b7%af%e6%95%b4%e7%90%86-2/调用接口A后获取到 PARTINDEX（从第几个切片开始上传），接着调用接口B进行上传，上传后手动计算进度。
H5怎么实现文件断点续传
weixin_45525177的博客
10-13 83
参考文章：http://blog.ncmem.com/wordpress/2023/10/13/h5%e6%80%8e%e4%b9%88%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0/因此在文件开始上传之前，我们和服务器要有一个“握手”的过程，告诉服务器文件信息，然后和服务器约定切片的大小，当和服务器达成共识之后就可以开始后续的文件传输了。有了HTML5 的 File api之后切割文件比想象的要简单的多。
谈谈前端关于文件上传下载那些事资料.zip
05-03
3. 性能优化：对于大文件，考虑分片上传和断点续传；对于大量小文件，考虑批量上传。 4. 跨域问题：当涉及到不同源的文件上传和下载，需要处理好跨域策略，如CORS设置。 5. 兼容性：尽管HTML5提供了丰富的API，但...
webUploader上传插件可运行Demo
07-31
2. **断点续传**：支持在上传过程中中断后继续上传，尤其对大文件上传非常实用。 3. **文件预览**：用户可以选择文件并预览，尤其是图片类文件，增加交互性。 4. **文件类型过滤**：可以设定允许上传的文件类型，...
bootstrap实现批量上传附件
09-07
Bootstrap 实现批量上传附件是一种常见的前端功能，常用于网站中让用户...以上是使用Bootstrap实现批量上传附件的基本流程和技术细节，实际项目中可能还需要考虑更多的细节和优化，如分块上传、断点续传、拖拽上传等。
jquery-OCUpload-文件上传实现
03-16
2. 视频上传：针对大文件，使用OCUpload的分片上传和断点续传功能，提供稳定高效的视频上传体验。 3. 云存储集成：与阿里云OSS、腾讯云COS等云存储服务集成，实现文件的云端存储。 总结，jQuery OCUpload是一个...
html5超大文件上传和断点续传的实现
weixin_45525177的博客
09-26 260
文件上传页面的前端可以选择使用一些比较好用的上传组件，例如百度的开源组件WebUploader，泽优软件的up6，这些组件基本能满足文件上传的一些日常所需功能，如异步上传文件，文件夹，拖拽式上传，黏贴上传，上传进度监控，文件缩略图，甚至是大文件断点续传，大文件秒传。分块上传，分块处理逻辑应该是最简单的逻辑了，up6已经将文件进行了分块，并且对每个分块数据进行了标识，这些标识包括文件块的索引，大小，偏移，文件MD5，文件块MD5（需要开启）等信息，服务端在接收这些信息后便可以非常方便的进行处理了。
大文件上传如何做断点续传?全端+后端结合开发
wangxuanyang_zer的博客
08-12 1377
断点续传（Resumable File Upload）是一种文件上传的技术，它允许在上传过程中出现中断或失败的情况下，能够从中断的位置继续上传，而不需要重新上传整个文件。这在处理大文件或不稳定的网络连接时非常有用。
HTML超大文件上传和断点续传的实现
Mr_Zang666的博客
05-12 185
但是在实际场景中，会出现一种情况，即在终端发起续传请求时，URL对应的文件内容在服务端已经发生变化，此时续传的数据肯定是错误的。如何解决这个问题了？服务端在收到续传请求时，通过If-Range中的内容进行校验，校验一致时返回206的续传回应，不一致时服务端则返回200回应，回应的内容为新的文件的全部数据。用于响应头，指定整个实体中的一部分的插入位置，他也指示了整个实体的长度。(2)“Range: bytes=-200”，它不是表示请求文件开始位置的201个字节，而是表示要请求文件结尾处的200个字节。
H5+JAVA的文件上传,断点续传
weixin_45525177的博客
05-27 248
需求：项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在500M内，因此自己需要在项目中进行文件上传部分的调整和配置，自己将大小都以501M来进行限制。 第一步： 前端修改 由于项目使用的是BJUI前端框架，并没有使用框架本身的文件上传控件，而使用的基于jQuery的Uploadify文件上传组件，在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分，这部分代码封装在bjui-all.js文件中， 在bjui-all.js文件中的全局变量定义中有以下
ajax 拖拽 断点续传 （很牛逼啊）
yilukuangpao的博客
06-09 3338
>  html>      head>          meta charset="UTF-8"/>          title>xhr2title>      head>      body>          div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">            
大文件上传如何做断点续传？
huihui_999的博客
04-26 416
大文件上传如何做断点续传
大文件上传和断点续传源代码
最新发布
weixin_45525177的博客
05-17 343
痛点就是刷新继续，批量上传，批量下载。网上能够做到批量下载，文件夹下载的，搜了一下，几乎没有，全部都是讲的上传，基本上都是用的HTML5的API，也就是Chrome的API，关键是这个API不支持IE。大文件上传和断点续传源代码，大文件上传和断点续传解决方案，大文件上传和断点续传实例，大文件上传和断点续传思路，大文件上传源代码，大文件上传思路，大文件上传解决方案，大文件分块上传，大文件分片上传，大文件加密上传，一般大的文件不用HTML的一次性上传，而是采用分块，分片，分段，分割，切割技术上传。
h5大文件上传如何做断点续传
weixin_52041354的博客
10-28 229
第二步：调用RandomAccessFile的getChannel()方法，打开文件通道 FileChannel，这块逻辑可以优化，如果以后有分布式存储需求，可以改为分布式存储，减轻单台服务器的压力。/** * 文件在服务器中的相对路径。示例：/www/web/upload/md5.exe *//** * 数字化的文件长度。// /// 是否是文件夹中的子文件 ///
AJAX驱动的Web文件上传进度监控与实时反馈
文章以一个实际项目的视角，强调了通过AJAX实现文件上传进度控制的重要性和步骤，尤其是在处理大文件上传时提升用户体验的优势。 通过阅读这篇文档，读者可以学习到如何设计一个功能完备的文件上传系统，包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值