<!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. 如何学习MySQL数据库管理员(OCP)认证（转）

    如何学习MySQL数据库管理员(OCP)认证 转自:   甲骨文专家中,MySQL 5.6数据库管理员( OCP )证明您的安装和优化MySQL服务器,设置复制和安全,执行数据库备份及性能优化和保护M ...

  2. dubbo中拦截生产者或消费者服务方法调用

    比如当前有个需求,需要拦截dubbo的服务提供方或者服务消费方的方法,判断参数中是否包含某个关键字进行拦截阻止执行,那么我们可以通过使用dubbo的SPI机制通过实现Filter类来拦截,话不多说直接 ...

  3. Y7000 安装ubuntu16.04.6 的tips :禁用nouveau 、Wifi 问题 、nvidia 驱动安装

    由于最近要跑DeepLearning 所以在自己的Y7000上装一个Ubuntu ,自己碰了好多壁 写下来以防止自己忘掉以便后续再用! 配置:i7-8750H +GeForce GTX 1050Ti ...

  4. mongodb导出导入数据

    在使用mongodump导出单个表的时候,遇到了一个错误 # mongodump --host xxx --port 27017 --username 'admin' -p '123456' -d 数 ...

  5. mysql之sql性能调优

    sql调优大致分为两步:1 如何定位慢查询   2 如何优化sql语句. 一:定位慢查询 -- 显示到mysql数据库的连接数 -- show status like 'connections'; - ...

  6. 【React -- 9/100】 抽离顶部导航栏 - [组件复用]

    今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX import React from " ...

  7. python Rabbitmq编程(一)

    python Rabbitmq编程(一) 实现最简单的队列通信 send端 #!/usr/bin/env python import pika credentials = pika.PlainCred ...

  8. python 获取系统环境变量 os.environ and os.putenv

    从一段code说起 “if "BATCH_CONFIG_INI" in os.environ:” 判断环境变量的值有没有定义 如果定义的话就去环境变量的值,否则就取当前目录下的co ...

  9. 【串线篇】spring boot整合SpringData JPA

    一.SpringData简介 其中SpringData JPA底层基于hibernate 二.整合SpringData JPA JPA: Java Persistence API的简称,中文名Java ...

  10. 【串线篇】spring boot使用外置的Servlet容器

    嵌入式Servlet容器:应用打成可执行的jar 优点:简单.便携: 缺点:默认不支持JSP.优化定制比较复杂 (使用定制器[ServerProperties/自定义EmbeddedServletCo ...