<!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. [转帖]NetSuite 进入中国市场满一年，甲骨文公布首份成绩单

    NetSuite 进入中国市场满一年,甲骨文公布首份成绩单 https://baijiahao.baidu.com/s?id=1617073148682281883&wfr=spider&am ...

  2. Linux hostname 主机名篇

    主机名修改(以主机名为config为例) 1.修改文件/etc/sysconfig/network,内容为 [root@config ~]# cat /etc/sysconfig/network# C ...

  3. spring - 第N篇 一些笔记

    1.properties文件的引入 <bean id="propertyConfigurer" class="org.springframework.beans.f ...

  4. kernel编译

    Linux内核编译与安装 Linux内核介绍 Linux内核是一个用C语言写成的,符合POSIX标准的类Unix操作系统.内核是操作系统中最基本的一部分,提供了众多应用程序访问计算机硬件的机制.Lin ...

  5. Python中对 文件 的各种骚操作

    Python中对 文件 的各种骚操作 python中对文件.文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块. 得到当前工作目录,即当前Python脚本工作的目录路径: os.getc ...

  6. object in javascript

    枚举对象属性 for....in 列举obj的可枚举属性,包括自身和原型链上的 object.keys() 只列举对象本身的可枚举属性 创建对象的几种方式 对象字面量 const pre='test' ...

  7. javascript百度地图使用(根据地名定位、根据经纬度定位)

    需要购买阿里云产品和服务的,点击此链接领取优惠券红包,优惠购买哦,领取后一个月内有效: https://promotion.aliyun.com/ntms/yunparter/invite.html? ...

  8. P2P技术

    1.什么是P2P技术 点对点技术又称对等互联网络技术,是一种网络新技术,依赖网络中参与者的计算能力和带宽,而不是把依赖都聚集在较少的几台服务器上.P2P网络通常用于通过Ad Hoc连接来连接节点. P ...

  9. 一般软件开发流程和BBS表设计

    项目开发流程 需求分析 架构师+产品经理+开发组组长 和客户公司谈需求之前 ,事先需要想一下这个项目要怎么做 里面的坑点提前想好比较简单的解决方案 在跟客户谈的时候有意识的引导客户朝你已经想好的方案上 ...

  10. 你不知道的props和state

    State 与 Props 区别props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法 ...