<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入数据</title>
<script type="text/javascript" src="/webapp/javascript/jquery.min.js"></script>
<script type="text/javascript">
//加载完成后执行
$(document).ready(function () {
//为上传按钮添加点击事件
$("#btnUpload").click(function () {
//创建异步请求对象
var xhr = new XMLHttpRequest();
//创建form对象
var formData = new FormData();
//获取数据类型参数
var dataType = $("#dataType").val();
//获取文件名及文件本身
var fileName = $("#fileUpload").val(); //文件名
var file = $("#fileUpload").get(0).files[0]; //文件本身
//判断文件是否为空，若为空，则提示并返回
if(file == null){
alert("请先选择要上传的文件。");
return;
}
//将文件添加到form表单中
formData.append("file", $("#fileUpload").get(0).files[0]);
formData.append("dataType", dataType);
//问上传添加进度处理函数
xhr.upload.onprogress = function (event) {
//计算上传进度百分比
var percentComplete = Math.round(event.loaded * 100 / event.total);
//显示百分比效果
$("#progressUpload").val(percentComplete).show();
}
//添加状态相应处理函数
xhr.onreadystatechange = function () {
//如果响应成功
if(xhr.readyState == 4 && xhr.status == 200){
//处理响应结果
/* $("#progressUpload").fadeOut("slow", function(){
//显示结果
$("#lblMessage").html(xhr.responseText);
}); */
}
}
//响应成功处理函数
xhr.onload = function (e) {
if(this.readyState == 4 && this.status == 200){
//隐藏进度条
//处理响应结果
$("#progressUpload").fadeOut("slow", function(){
//显示结果
$("#lblMessage").show().html("上传完成！");
});
}
}
//开始发送数据时
xhr.onloadstart = function () {
$("#progressUpload").hide();
$("#lblMessage").hide();
}
//超时处理
xhr.ontimeout = function (e) {
$("#message").html("sorry,连接超时了！");
}
//错误处理
xhr.onerror = function (e) {
$("#message").html("sorry,连接出错了！");
}
//打开连接请求
xhr.open("POST","test_save",true);
//发送数据
xhr.send(formData);
});
});
</script>
</head>
<body>
<fieldset>
<legend>批量导入数据</legend>
<!-- 数据表上传 -->
<select id="dataType" name="dataType">
<option value="教师信息">教师信息</option>
<option value="外聘教师" >外聘教师信息</option>
<option value="课程信息" >课程信息</option>
<option value="班级信息" >班级信息</option>
<option value="学生信息" >学生信息</option>
<option value="results" >成绩信息</option>
<option value="教学任务" >教学任务</option>
<option value="专业信息" >专业信息</option>
<option value="开课计划" >开课计划</option>
</select>
<input id="fileUpload" type="file" name="file"/>
<input id="btnUpload" type="button" value="上传"/>
<div id="message">
<progress id="progressUpload" value="0" max="100" style="display:none;">
</progress>
<label id="lblMessage"></label>
</div>
</fieldset>
</body>
</html>
原文链接地址https://www.cnblogs.com/tanhao/p/7435656.html
网友评论