您的位置：首页 > 其它

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

2017-11-09 09:49 453 查看
完整文件内容如下

<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航