<!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. （4.24）【mysql、sql server】分布式全局唯一ID生成方案

    参考:分布式全局唯一ID生成方案:https://blog.csdn.net/linzhiqiang0316/article/details/80425437 分表生成唯一ID方案 sql serve ...

  2. java学习day1

    一.常用的DOS命令 1.打开cmd 窗口键+r --> 输入cmd --> 确认 2.常用的dos命令 dir:列出当前目录下的所有文件及文件夹 md:创建一个新的目录 rd:删除目录 ...

  3. [BZOJ 3771] Triple(FFT+容斥原理+生成函数)

    [BZOJ 3771] Triple(FFT+生成函数) 题面 给出 n个物品,价值为别为\(w_i\)且各不相同,现在可以取1个.2个或3个,问每种价值和有几种情况? 分析 这种计数问题容易想到生成 ...

  4. redis在微博与微信等互联网应用笔记

    Redis实战redis在微博与微信等互联网应用实例讲解全集 1. 对象缓存 id user balance 1 john 1200 2 tom 3000 对于这种存储,redis可以使用mset o ...

  5. idea 代码部分格式化

    效果: 处理Idea使用ctrl+alt+L进行代码格式化时部分代码可以被忽略,不执行格式化功能(webstorm,phpstorm同理) 原因: 有时希望自己写的一些代码不被格式化,或者发现格式化后 ...

  6. 简述COOKIE和SESSION的区别与联系？

    cookie 和session 的区别:1.cookie数据存放在客户的浏览器上,session数据放在服务器上.2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 ...

  7. springboot 配置

    springboot 配置文件中属性变量引用方式@@解析 这种属性应用方式是field_name=@field_value@. 两个@符号是springboot为替代${}属性占位符产生,原因是${} ...

  8. Excel如何通过关键字模糊匹配查找全称

    打开excel,以其素材为例,通过关键字模糊匹配查找全称.   在公司名下输入公式:=LOOKUP(1,0/FIND(D2,A2:A5),A2:A5),按回车键确定即可.   FIND(D2,A2:A ...

  9. JavaScript是如何工作的：引擎，运行时间以及调用栈的概述

    JavaScript是如何工作的:引擎,运行时以及调用栈的概述 原文:How JavaScript works: an overview of the engine, the runtime, and ...

  10. Nginx设置上传文件大小限制

    就是nginx对上传的图片大小有了限制嘛,所以更改nginx的配置文件就好了 client_max_body_size 1000m; 参考:https://blog.csdn.net/TitanSee ...