利用FileReader.readAsText()读取文件（书签）内容并保存到服务器

多隆

已于 2023-06-13 21:07:48 修改

阅读量1.6w

点赞数

分类专栏： # 前端文章标签：服务器 html css

于 2017-11-09 09:49:59 首次发布

本文链接：https://blog.csdn.net/huayushuangfei/article/details/78485913

版权

前端专栏收录该内容

58 篇文章 1 订阅

订阅专栏

完整文件内容如下

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>发布</title>
	<style type="text/css">
	#demoForm {
		border: 1px dashed #f2f2f2;
		margin-top:10px;
		margin-bottom:10px;
		padding-top:10px;
		padding-bottom:10px;
		text-align:center;
	}

	#demoForm .progressbar { 
		width:100%; 
		display:none;
	} 

	#demoForm .progressbar #loading { 
		width:400px; 
		height:20px; 
		background:/* url(20100311165403426.png) no-repeat */#f6f6f6; 
		position: relative;
		margin: 0 auto;
	} 

	#demoForm .progressbar #loading .progress { 
		width:0px; 
		height:20px; 
		line-height:20px; 
		background:#45B6F7/*url(20100311165403115.png) no-repeat*/; 
	} 

	#demoForm .progressbar #loading .percent {
		width:100%;
		height:20px; 
		line-height:20px;
		position: absolute;
		left: 0;
		top: 0;
		color:#fff; 
		z-index: 10;
		text-align:center; 
		font-family:Tahoma; 
		font-size:12px; 
	}

	#demoForm .progressbar #message { 
		width:100%; 
		height:25px; 
		line-height:25px;
		font-family:Tahoma; 
		font-size:12px; 
		/* background-color:#d8e7f0;  */
		/* border:1px solid #187CBE;  */
		text-align:center; 
		margin-top:10px; 
		
		/* display:none;  */
	}

	#demoForm .execute {
		width:100%; 
		text-align:center;
		display:none;
	}

	#demoForm .execute #filepath { 
		width:100%; 
		height:25px; 
		line-height:25px;
		font-family:Tahoma; 
		font-size:12px; 
		/* background-color:#d8e7f0;  */
		/* border:1px solid #187CBE;  */
		text-align:center; 
		margin-bottom:10px; 
		
		/* display:none;  */
	}

	#demoForm .execute button {
		width: 160px;height: 44px;border: medium none;border-radius: 2px;background: #00A3D9 none repeat scroll 0% 0%;font-size: 16px;color: #FFF;cursor: pointer;
	}


	/* http://www.ablanxue.com/prone_21850_1.html */
	#demoForm .new-contentarea {
		width: 100%;
		overflow:hidden;
		margin: 0 auto;
		position:relative;
		display:block;
	}
	#demoForm .new-contentarea label {
		width:100%;
		height:100%;
		display:block;
		color: #FFFFFF;
		text-align:center;
		/* font-size: 20px;
		font: 400 14px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei; */
		font: 400 20px/2.85 Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei;
		
	}
	#demoForm .new-contentarea input[type=file] {
		width:166px;
		height:57px;
		background:#333;
		/* margin: 0 auto; */
		position:absolute;
		top:0;
		right/*\**/:0px\9;
		margin-right/*\**/:0px\9;
		width/*\**/:10px\9;
		opacity:0;
		filter:alpha(opacity=0);
		z-index:2;
	}
	#demoForm .new-contentarea a.upload-file{
		width:166px;
		display: inline-block;
		height:57px;
		line-height: 57px;
		background-color: #f38e81;
		border-radius: 3px;
		text-decoration:none;
		cursor:pointer;
	}
	#demoForm .new-contentarea a.upload-file:hover{
		background-color: #ec7e70;
	}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
	<form id="demoForm" name="demoForm" method="post" enctype="multipart/form-data" action="javascript: uploadAndSubmit();">
		<div class="progressbar"> 
			<div id="loading">
				<div class="progress"></div>
				<div class="percent"></div>
			</div> 
			<div id="message"></div> 
		</div> 
		<div class="execute">
			<div id="filepath"></div> 
			<button>立即执行</button>
		</div>
			<div class="new-contentarea" style="text-align:center;">
			<a href="javascript:void(0)" class="upload-file"><label for="upload-file">上传文件</label></a>
			<input type="file" name="file" id="upload-file" style="right:50%;margin-right:-83px;" />
		</div>
	</form>         
	
	<script type="text/javascript">
	$("#upload-file").change(function() {
		var path = $(this).val();
		if (path != null && path != "") {
			$(".new-contentarea").css("display","none");
			$(".progressbar").css("display","none");
			$(".execute").css("display","block");
		} 
		$("#filepath").html(path);
	});
	
	function uploadAndSubmit() {
		$(".new-contentarea").css("display","none");
		$(".progressbar").css("display","block");
		$(".execute").css("display","none");
		
		var form = document.forms["demoForm"];
		if (form["file"].files.length > 0) {
			var file = form["file"].files[0];
			
			var reader = new FileReader();
			
			reader.onloadstart = function() {
				$("#message").html("开始加载..");
			};
			
			reader.onprogress = function(p) {
				$("#message").html("正在加载(Bytes：" + p.loaded + "/" + file.size + ")..");
			};
			
			reader.onload = function() {
				$("#message").html("完成加载..");
			};
			
			reader.onloadend = function() {
				if (reader.error) {
					$("#message").html("文件加载失败!");
				} else {
					var ppt = reader.result;
					
					var len = $(ppt).find("a").length;
					
					var text = "";
					var href = "";
					var error = "";
					$(ppt).find("a").each(function(i){
						text = $(ppt).find("a").eq(i).text();
						href = $(ppt).find("a").eq(i).attr("href");
						
						console.log(text);
						console.log(href);
						
						SetProgress(((i+1)/len*100).toFixed(2));

						$("#message").html("正在处理第" + (i+1) + "条数据..").fadeIn("slow");
						
						$.ajax({
							type: "POST",
						  	url: "/save",
						  	data: {"name":text, "url":href},
						  	cache: false,
						  	async: false,
						  	dataType: "json",
						  	success: function(data){
						  		var json = data;
			  					if (json.status != 0) {
			  						$("#message").html(json.msg);
			  						error += text + "<br>" + href + "<br><br>";
			  					}
						  	}
						});
					});
					
					if (error == "") {
						$("#message").html("执行成功!").fadeIn("slow");
					} else {
						$("#message").html("执行失败!<br><br>" + error).fadeIn("slow");
					}
					
				}
			};
			reader.readAsText(file);
		}
	}
	
	function SetProgress(progress) { 
		if (progress) { 
			$("#loading div").first().css("width", String(progress) + "%"); //控制#loading div宽度 
			$("#loading div").last().html(String(progress) + "%"); //显示百分比 
		} 
	} 
	</script>
</body>
</html>