断点上传中的javascript代码

最新推荐文章于 2023-06-28 18:20:36 发布
最新推荐文章于 2023-06-28 18:20:36 发布
阅读量120 收藏
点赞数
分类专栏： javascript 文章标签： 断点上传 javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TCH987551623/article/details/84440281
版权 
//项目路径，例如："/upload"
var contextPath ;
//显示速度百分比文件名的元素id
var ratePercent_id;
//是否已经上传完成
var isUploadComplete = 'false';
//查询上传速度百分比的时间间隔（值越小，频率越大）
var getRateInterval = 3000;
//页面经过多久之后去检验本地是否安装了客户端
var checkIsInstall_time_delay = 2000;
//文件上传成功之后，接收文件和参数信息的url
var _callbackURL;
//客户端获取授权的url
var getAuthorityURL;
//去查询用户选择的文件路径的定时器的时间间隔
var getFilePathInterval = 1000;
//将文件路径信息保存到服务器时的key
var key = Date.parse(new Date())+'-'+Math.random();
//获取上传服务器信息URL：
var _URL4UploadServerInfo;
//getAuthority的相应
var getAuthorityResponse;
var isShowRateLocal;
/**
 * 初始化服务器名称以及上传连接、速度百分比、文件名元素的id
 * @param {Object} path服务器名称
 * @param {Object} linkId上传连接
 * @param {Object} rateId速度
 * @param {Object} fileNameId文件名
 * @param {Object} percentId百分比
 */
function initContextPathAndIds(URL4UploadServerInfo,callbackURL,ratePercentId){
	if(! URL4UploadServerInfo){
		alert('请设置URL4UploadServerInfo的值');
	}
	if(! callbackURL){
		alert('请设置callbackURL的值');
	}
	_URL4UploadServerInfo = URL4UploadServerInfo;
	_callbackURL = callbackURL;
	if(ratePercentId){
		ratePercent_id = ratePercentId;
	}
	loadComplete();
}

/**
 * 遍历form中的所有元素，并生成对应的参数字符串
 */
function findAllFormElements(){
	var params = '';
	var element;
	//遍历input type=text元素（且有name属性）
	$("input:text[name]").each(function(){
		element = $(this);
		//如果没有value则返回
		if(! element.val()){
			return;
		}
		//说明不是第一个
		if(params){
			params += '&'+element.attr('name')+'='+element.val();
		//说明是第一个
		}else{
			params += element.attr('name')+'='+element.val();
		}
	});
	//遍历input type=password元素（且有name属性）
	$("input:password[name]").each(function(){
		element = $(this);
		//如果没有value则返回
		if(! element.val()){
			return;
		}
		//说明不是第一个
		if(params){
			params += '&'+element.attr('name')+'='+element.val();
		//说明是第一个
		}else{
			params += element.attr('name')+'='+element.val();
		}
	});
	//遍历input type=hidden元素（且有name属性）
	$("input[type='hidden'][name]").each(function(){
		element = $(this);
		//如果没有value则返回
		if(! element.val()){
			return;
		}
		//说明不是第一个
		if(params){
			params += '&'+element.attr('name')+'='+element.val();
		//说明是第一个
		}else{
			params += element.attr('name')+'='+element.val();
		}
	});
	//遍历input type=radio元素（且有name属性）
	$("input:radio[name]:checked").each(function(){
		element = $(this);
		//如果没有value则返回
		if(! element.val()){
			return;
		}
		//说明不是第一个
		if(params){
			params += '&'+element.attr('name')+'='+element.val();
		//说明是第一个
		}else{
			params += element.attr('name')+'='+element.val();
		}
	});
	//遍历input type=checkbox元素（且有name属性）
	$("input:checkbox[name]:checked").each(function(){
		element = $(this);
		//如果没有value则返回
		if(! element.val()){
			return;
		}
		//说明不是第一个
		if(params){
			params += '&'+element.attr('name')+'='+element.val();
		//说明是第一个
		}else{
			params += element.attr('name')+'='+element.val();
		}
	});
	//遍历select option元素（且有name属性）
	$("select[name] option:selected").each(function(){
		element = $(this);
		//如果没有value则返回
		if(! element.val()){
			return;
		}
		if(! element.parent("[name]")){
			return;
		}
		//说明不是第一个
		if(params){
			params += '&'+element.parent("[name]").attr('name')+'='+element.val();
		//说明是第一个
		}else{
			params += element.attr('name')+'='+element.val();
		}
	});
	return params;
}
var getFilePathTimeout;
/**
 * 初始化
 */
function loadComplete(){
	var file;
	if(! key){
		key = Date.parse(new Date())+'-'+Math.random();
	}
	$("input:file").each(function(i){
		file = $(this);
		file.bind('click',function(){
			try{
				//绑定事件，点击之后弹出文件选择框
				if(! file.attr("id")){
					alert('您尚未对file元素设定id');
					return false;
				}
				//先等待1000ms，让客户端有时间去向服务器发送请求，确保IsInstall的值被设置
				setTimeout("checkIsInstall()",checkIsInstall_time_delay);
				//调用客户端弹出文件选择框
				window.location = 'Luban://local_do=fileupload&choosefile=true&key='+key+"&contextPath="+ contextPath+"&id="+file.attr("id");
				if(getFilePathTimeout){
					clearTimeout(getFilePathTimeout);
				}
				//从点击file开始，过500ms开始去查询文件路径
				getFilePathTimeout = setTimeout("getFilePathFromServer()",500);
			}catch(e){}
			return false;
		});
	});
	//向_URL4UploadServerInfo地址发送get请求，并解析返回结果
	$.get(_URL4UploadServerInfo,function(data){
		if(data){
			//响应格式：uploadServerDomain=http://u.myluban.com&&URL4ApplyUploadAuth=http://www.google.com/applyUploadAuth4LubanAdmin
			contextPath = data.split('&&')[0].split('=')[1];
			getAuthorityURL = data.split('&&')[1].split('=')[1];
		}
	},"text");
}

/**
 * 获取授权信息
 */
function getAuthority(getAuthorityURL,href){
	$.get(getAuthorityURL,function(data){
		if(data){
			//响应格式：authSource=鲁班运维后台&&auth2User=刘夕波&&auth2UserType=2&&fileUpload2URL=http://u.myluban.com/fileupload&&
			//						authGenerateTime=1370422339758&&authExpiredTimeLen=30000&&sign=md5
			//由于客户端解析参数的时候会按照&拆分，所以把&&替换为##
			getAuthorityResponse = data.replace(/&&/g,'##');
			//将href保存到服务器
			sendHrefToServer(href);
		}
	},"text");
}
/**
 * 从服务器查询用户选择的文件的路径，显示在页面中
 */
function getFilePathFromServer(){
	var url = contextPath+'/lubanFileUpload/getFilePath';
	if(! key){
		key = Date.parse(new Date())+'-'+Math.random();
	}
	var param = {'key':key};
	//先将参数发送到服务器，发送成功之后再启动定时器检查本地是否安装了客户端
	$.post(url,param,function(data){
		if(data){
			//将data转为json格式
			data = eval("("+data+")");
			//点击了取消，没有选择文件
			if("cancel" == data.status){
				if(getFilePathTimeout){
					clearTimeout(getFilePathTimeout);
				}
				return;
			//点击了确认，选择了文件，要显示路径
			}else if("confirm" == data.status){
//				createAndShowFloatDiv(data.id,data.filePath);
				//alert(data.filePath);
				if(getFilePathTimeout){
					clearTimeout(getFilePathTimeout);
				}
				return;
			}
		}
		//说明还没有查询到结果，继续查询
		if(getFilePathTimeout){
			clearTimeout(getFilePathTimeout);
		}
		getFilePathTimeout = setTimeout("getFilePathFromServer()",getFilePathInterval);
	},"text");
}
/**
 * 创建并显示浮动层
 */
function createAndShowFloatDiv(id,filePath){
	var width = $("#"+id).width()*0.75;
	var height= $("#"+id).height();
	var top = $("#"+id).offset().top;
	var left =  $("#"+id).offset().left;
}
/**
 * 将上传参数保存到服务器
 */
function upload(){
	//格式为：uploadhelper://fileName=aaa.txt&fileName=bbb.txt&param=p1&param=p2
	var href = '';
	//循环所以的file，将其文件路径添加到链接后面
	if(isShowRateLocal){
		href += "isShowRateLocal=true";
	}
	if(_callbackURL){
		if(href){
			href += ("&callbackURL="+_callbackURL);
		}else{
			href += ("callbackURL="+_callbackURL);
		}
	}
	var param = findAllFormElements();
	if(param){
		if(href){
			href += ("&"+param);
		}else{
			href += (param);
		}
	}
	getAuthority(getAuthorityURL,href);
}

//定义一个定时器去显示下载速度和百分比
var getUploadRateTimeout ;

/**
 * 先判断本地是否安装了客户端，然后再查询上传速度百分比
 */
function confirmUpload(){
	upload();
	return false;
}
/**
 * 判断本地是否安装了客户端，然后再查询上传速度百分比
 */
function checkIsInstall(isUploadOrNot){
	var url = contextPath+'/lubanFileUpload/getIsInstall?key='+key;
	$.get(url,function(data){
		if(data != 'true'){
			var result = confirm('如果您还没有安装客户端程序，请点击确定下载客户端，下载之后双击程序进行注册表注册，如果您已经下载过客户端，' +
								'请选择取消，并重新双击该程序进行注册，注意：请不要将客户端存放在含有中文的目录下');
			if(result){
				window.location = contextPath+"/lubanFileUpload/downloadClient";
			}
		}
		//如果是点击的选择文件，则只需要调用客户端弹出文件选择框即可，不需要查询上传速度
		//如果是点击的上传文件，则需要查询上传速度
		if(isUploadOrNot){
			if(getUploadRateTimeout){
				clearTimeout(getUploadRateTimeout);
			}
			getUploadRateTimeout = setTimeout("getUploadRate()",0);
		}
	},"text");
}
/**
 *手动显示速度 
 */
 function showRate_manual(){
	if(getUploadRateTimeout){
		clearTimeout(getUploadRateTimeout);
	}
	getUploadRateTimeout = setTimeout("getUploadRate()",0);
 }
/**
 * 将上传参数保存到服务器
 */
function sendHrefToServer(href){
	if(! getAuthorityResponse){
		alert("尚未获取授权信息");
		//没有获取授权的Url地址，则无法获取授权
		return;
	}
	if(! contextPath){
		alert("尚未获取上传服务器信息");
		//没有获取contextPath地址
		return;
	}
	//添加上获取授权的url地址
	href += ("&getAuthorityResponse="+getAuthorityResponse);
	href = "Luban://"+encodeURI(encodeURI(href));
	var url = contextPath+'/lubanFileUpload/setHrefValue';
	if(! key){
		key = Date.parse(new Date())+'-'+Math.random();
	}
	var param = {'href':href,'key':key};
	//先将参数发送到服务器，发送成功之后再启动定时器检查本地是否安装了客户端
	$.post(url,param,function(){
		//先等待1000ms，让客户端有时间去向服务器发送请求，确保IsInstall的值被设置
		setTimeout("checkIsInstall('upload')",checkIsInstall_time_delay);
		window.location = "Luban://getArgumentsFromServer=true&local_do=fileupload&contextPath="+ contextPath +"&key="+key;
	},"text");
}
/**
 * 通过ajax查询上传速度和百分比
 */ 
function getUploadRate(){
	//首先检查显示速度信息的id是否存在，不存在的话就不需要查询速度信息
	if(! ratePercent_id){
		//如果ratePercent_id不存在，则认为不需要查询和显示速度百分比信息
		if(getUploadRateTimeout){
			//如果有查询速度百分比的定时器，则取消该定时器
			clearTimeout(getUploadRateTimeout);
		}
		return;
	}
	if(key){
		var url = contextPath+'/lubanFileUpload/getUploadRateAndPercent?time='+Date.parse(new Date())+"&key="+key;
	$.get(url,function(data){
		showRate(data);
	},"text");
	}
}
/**
 * 显示速度和百分比
 */
function showRate(data){
	if(data){
		var result = eval("("+data+")");
		$("#"+ratePercent_id).html('文件名：'+result.fileName+'<br/>'+'上传速度：'+result.rate+' kb/s'+'<br/>'+'上传百分比：'+result.percent+' %');
		if(result.isCompleted == 'true'){
			if(getUploadRateTimeout){
				clearTimeout(getUploadRateTimeout);
			}
			isUploadComplete = 'true';
			//执行上传完成的操作
			fileUploadComplete();
			//刷新
			window.location = window.location;
		}else if(result.isCompleted == 'interrupt'){
			if(getUploadRateTimeout){
				clearTimeout(getUploadRateTimeout);
			}
			isUploadComplete = 'break';
			//执行上传中断的操作
			fileUploadInterrupted();
			//刷新
			window.location = window.location;
		}else{
			if(getUploadRateTimeout){
				clearTimeout(getUploadRateTimeout);
			}
			getUploadRateTimeout = setTimeout("getUploadRate()",getRateInterval);
		}
	}else{
		if(getUploadRateTimeout){
				clearTimeout(getUploadRateTimeout);
			}
		getUploadRateTimeout = setTimeout("getUploadRate()",getRateInterval);
	}
}
function fileUploadComplete(){}
function fileUploadInterrupted(){}
/**
 * 获得页面的JSESSIONID
 * @return {TypeName} 
 */
function getSessionId(){
	var c_name = 'JSESSIONID';
	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));
	   }
	}
}

 

TCH987551623
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS异步文件分片断点上传的实现思路
10-20
在项目中有时会遇到大文件上传，经常会出现链接超时的问题，所以就需要使用文件分片上传的方式来上传大文件。下面通过本文给大家介绍js异步文件分片断点上传的实例代码，需要的的朋友参考下吧
断点js-断点续传-大文件断点上传
weixin_52041354的博客
10-18 68
4. 上传文件不能使用 request.getParameter("")获取参数了，而是直接将request解析，通过判断每一项是文件还是非文件，然后进行相应的操作（文件的话就是用流来读取，非文件的话，暂时保存到一个map中。, jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名。this.ui.msg.text("MD5计算完毕，开始连接服务器...");this.ui.msg.text("服务器存在相同文件，快速上传成功。
js文件分片上传,断点续传
weixin_45525177的博客
12-06 2715
前言文件上传是一个老生常谈的话题了，在文件相对比较小的情况下，可以直接把文件转化为字节流上传到服务器，但在文件比较大的情况下，用普通的方式进行上传，这可不是一个好的办法，毕竟很少有人会忍受，当文件上传到一半中断后，继续上传却只能重头开始上传，这种让人不爽的体验。那有没有比较好的上传体验呢，答案有的，就是下边要介绍的几种上传方式详细教程秒传1、什么是秒传 通俗的说，你把要上传的东西上传，服务器会先做MD5校验，如果服务器上有一样的东西，它就直接给你个新地址，其实你下载的都是服务器上的同一个文件，想要不秒传，其
js大文件上传如何做断点续传
weixin_45525177的博客
05-23 146
4GB以上超大文件上传和断点续传服务器的实现 随着视频网站和大数据应用的普及，特别是高清视频和4K视频应用的到来，超大文件上传已经成为了日常的基础应用需求。 但是在很多情况下，平台运营方并没有大文件上传和断点续传的开发经验，往往在网上找一些简单的PHP或者Java程序来实现基本的上传功能，然而在实际使用中会发现，这些基于脚本语言实现的上传功能模块性能很弱，一是不支持2GB以上的内容上传；二是无法支持断点续传；三是效率极低，单台服务器最多支持几十个并发上传连接。 当前我们要搭建一个运营级的视频服务平台，
使用JS实现可断点续传的文件上传方案
weixin_52041354的博客
02-23 1021
需求： 项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在20G内，因此自己需要在项目中进行文件上传部分的调整和配置，自己将大小都以20G来进行限制。 PC端全平台支持，要求支持Windows,Mac,Linux 支持所有浏览器。 支持文件批量上传 支持文件夹上传，且要求在服务端保留层级结构。文件夹数量要求支持到10W。 支持大文件断点续传，要求刷新浏览器，重启浏览器，重启电脑后仍然能够继续上传。文件大小要求能够支持到20个G。 支持自动加载本地文件，要求能够自动加载指定的本地.
JS可断点续传文件上传实现代码解析
11-20
【JS可断点续传文件上传实现代码解析】 在前端开发中，文件上传是一个常见的需求，尤其是当用户需要上传大文件时，断点续传功能显得尤为重要，它允许用户在网络不稳定的情况下暂停上传，并在恢复连接后继续从上次...
上传_上传代码_
10-02
在此过程中，需要确保代码能够正确处理多文件上传、断点续传等情况，并且要防止恶意文件上传，比如病毒或脚本文件。 标签“上传代码”表明这个代码实现着重于上传功能的编写，可能包括了文件选择、数据封装、网络...
文件的断点上传struts2
10-28
这个模块可能包括Action类、配置文件、前端界面代码等组件，帮助开发者快速集成断点上传功能到Struts2应用中。 总之，实现Struts2的断点上传需要对文件上传流程进行深入理解和定制，涉及文件分块、服务器存储、...
JS大文件上传断点续传解决方案
weixin_45525177的博客
06-09 170
javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求，也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求
js断点续传
最新发布
xuewenjie0217的博客
06-28 778
断点续传
基于JavaScript实现前端文件的断点续传
10-21
主要介绍了基于JavaScript实现前端文件的断点续传的相关资料,需要的朋友可以参考下
【前端知识之JS】大文件上传如何做断点续传
weixin_44337386的博客
06-09 611
本系列主要整理前端面试中需要掌握的知识点。本节介绍大文件上传如何做断点续传。
javascript大文件上传和断点续传
weixin_45525177的博客
04-15 240
1背景 用户本地有一份txt或者csv文件，无论是从业务数据库导出、还是其他途径获取，当需要使用蚂蚁的大数据分析工具进行数据加工、挖掘和共创应用的时候，首先要将本地文件上传至ODPS，普通的小文件通过浏览器上传至服务器，做一层中转便可以实现，但当这份文件非常大到了10GB级别，我们就需要思考另一种形式的技术方案了，也就是本文要阐述的方案。 技术要求主要有以下几方面： 支持超大数据量、10G级别以上 稳定性：除网络异常情况100%成功 准确性：数据无丢失，读写准确性100% .
JavaScript超大文件上传和断点续传的实现
weixin_45525177的博客
09-26 302
用户本地有一份txt或者csv文件，无论是从业务数据库导出、还是其他途径获取，当需要使用蚂蚁的大数据分析工具进行数据加工、挖掘和共创应用的时候，首先要将本地文件上传至ODPS，普通的小文件通过浏览器上传至服务器，做一层中转便可以实现，但当这份文件非常大到了10GB级别，我们就需要思考另一种形式的技术方案了，也就是本文要阐述的方案。分片上传的好处是将一个大请求分成多个小请求来执行，这样当其中一些请求失败后，不需要重新上传整个文件，而只需要上传失败的分片就可以了。客户端向服务器端发起获得授权的请求。
SpringCloud微服务:全栈技术与案例解析
CiCi岛的专栏
12-04 1884
网站 更多书籍点击进入&gt;&gt; CiCi岛 下载 电子版仅供预览及学习交流使用，下载后请24小时内删除，支持正版，喜欢的请购买正版书籍 电子书下载(皮皮云盘-点击“普通下载”) 购买正版 封页 编辑推荐 （1）作者是Java工程师，在Spring Cloud微服务方面积累了丰富的经验 （2）知识体系全面，详细讲解Spring Cloud微服务的全栈技术和扩展知识 （3）以实战为导向，...
JS超大文件上传解决方案:分片断点上传(一)
weixin_52041354的博客
11-08 309
第二步：调用RandomAccessFile的getChannel()方法，打开文件通道 FileChannel，这块逻辑可以优化，如果以后有分布式存储需求，可以改为分布式存储，减轻单台服务器的压力。/** * 文件在服务器中的相对路径。示例：/www/web/upload/md5.exe *//** * 数字化的文件长度。// /// 是否是文件夹中的子文件 ///
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">            
js+上传大文件
weixin_45525177的博客
08-14 522
文件夹上传：从前端到后端 文件上传是 Web 开发肯定会碰到的问题，而文件夹上传则更加难缠。网上关于文件夹上传的资料多集中在前端，缺少对于后端的关注，然后讲某个后端框架文件上传的文章又不会涉及文件夹。今天研究了一下这个问题，在此记录。 先说两个问题： 是否所有后端框架都支持文件夹上传？ 是否所有浏览器都支持文件夹上传？ 第一个问题：YES，第二个问题：NO 只要后端框架对于表单的支持是...
html5解决大文件断点续传
张erdan的博客
01-25 9030
js代码 xhr2 将图片拖拽到此 0% ajax上传--> 上传 //拖拽上传开始 //-1.禁止浏览器打开文件行为 document.addEventListener("drop",function(e){ //拖离 e.preventDefault(); }) doc
node实现大文件断点上传
05-13
以下是用Node.js实现大文件断点上传的示例代码： ```javascript const fs = require('fs'); const http = require('http'); const FILE_PATH = '/path/to/large/file'; const PORT = 3000; const server = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值