<!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>项目一、ajax上传数据（显示进度条）
原文地址：http://www.cnblogs.com/tanhao/p/7435656.html