项目ajax上传数据（显示进度条）
Posted 小白羊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了项目ajax上传数据（显示进度条）相关的知识，希望对你有一定的参考价值。
<!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上传数据（显示进度条）的主要内容，如果未能解决你的问题，请参考以下文章