<!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"/>&nbsp;<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上传数据（显示进度条）的更多相关文章

  1. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

  2. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  3. ASP.NET Jquery+ajax上传文件(带进度条)

    效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...

  4. jQuery上传文件显示进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  5. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

  6. blob 对象 实现分片上传 及 显示进度条

    blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象,里面可以储存大量的二进 ...

  7. 【原创】用JAVA实现大文件上传及显示进度信息

    用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/grayprince/UploadBigFil ...

  8. ajax上传数据

    ---恢复内容开始--- ajax上传数据,(简洁版) 1.上传普通同表单标签内容. 1.获取表单的内容 1. var file=$('#file').val();(放在点击事件后面) 2. var ...

  9. 说说ajax上传数据和接收数据

    我是一个脑袋不太灵光的人,所以遇到问题,厚着脸皮去请教大神的时候,害怕被大神鄙视,但是还是被鄙视了.我说自己不要点脸面,那是不可能的,但是,为了能让自己的技术生涯能走的更长远一些,受点白眼,受点嘲笑也 ...

  10. Java web实时进度条整个系统共用(如java上传、下载进度条、导入、导出excel进度条等)

    先上图: 文件上传的: 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 2019-03-26更新进度条显示体验 从服务器上压缩下载: 从 ...

随机推荐

  1. 使用ntpdate 同步 linux的时间

    1. linux 查看时间和时区的命令 timedatectl 效果为: Local time: Sun -- :: CST Universal time: Sun -- :: UTC RTC tim ...

  2. 题解 CF1140D 【Minimum Triangulation】

    题意:求将一个n边形分解成(n-2)个三边形花费的最小精力,其中花费的精力是所有三角形的三顶点编号乘积的和(其中编号是按照顶点的顺时针顺序编写的) 考虑1,x,y连了一个三角形,x,y,z连了一个三角 ...

  3. [LeetCode] 154. 寻找旋转排序数组中的最小值 II

    题目链接 : https://leetcode-cn.com/problems/find-minimum-in-rotated-sorted-array-ii/ 题目描述: 假设按照升序排序的数组在预 ...

  4. Scrapy 教程(十)-管道与数据库

    Scrapy 框架将爬取的数据通过管道进行处理,即 pipelines.py 文件. 管道处理流程 一.定义 item item 表示的是数据结构,定义了数据包括哪些字段 class TianqiIt ...

  5. OD消息断点

    [文章作者]: icefisher[作者邮箱]: 181712814@qq.com[软件下载]: [软件名称]: echap518.exe(只是供学习的crackme)[加壳方式]: 里面直接有个un ...

  6. Java中静态变量和实例变量的区别

    静态变量属于类的级别,而实例变量属于对象的级别. 主要区别有两点: 1,存放位置不同 类变量随着类的加载存在于方法区中,实例变量随着对象的对象的建立存在于堆内存中. 2,生命周期不同 类变量的生命周期 ...

  7. CPM、CPC、CPA、PFP、CPS、CPL、CPR等广告术语是什么意思

    CPM.CPC.CPA.PFP.CPS.CPL.CPR等广告术语是什么意思 一个网络媒体(网站)会包含有数十个甚至成千上万个页面,网络广告所投放的位置和价格 就牵涉到特定的页面以及浏览人数的多寡.这好 ...

  8. background的水平条纹和斜向条纹

    水平条纹: <div id="div1"> </div> linear-gradient属性 #div1{ width: 100px; height: 10 ...

  9. Java Web学习总结（4）HttpServletResponse

    Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.获取网页提交过来的数据,只需要找request对象就行了.要向网 ...

  10. MFC学习笔记1---准备工作

    什么是MFC MFC,全称Microsoft Foundation Classes,微软基础类库,顾名思义,是微软的攻城狮们将一些常用的基础的Windows API 函数用C++的形式封装成类,简化程 ...