<!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. 将从model中获得的数据传到js函数中

    刚遇到了一种情况,从controller中获得的model是一个集合,需要将这个集合循环放到标签中,并且需要为这些标签添加点击事件,每个值传入对应的点击事件函数中,由于model中的值是通过${ite ...

  2. 怎样用adb抓取log？

    在Android客户端的测试过程中,有时候我们会遇到闪退等异常情况.这时我们可以通过adb抓取log,从而给开发提供更多信息. 一.下载ADB.exe     在网上搜索“adb工具包”就可以找到很多 ...

  3. Redis 内存满了怎么办……

    我们知道Redis是基于内存的key-value数据库,因为系统的内存大小有限,所以我们在使用Redis的时候可以配置Redis能使用的最大的内存大小. 1.通过配置文件配置 通过在Redis安装目录 ...

  4. 分布式事务解决方案汇总：2PC、3PC、消息中间件、TCC、状态机+重试+幂等（转）

    数据一致性问题非常多样,下面举一些常见例子.比如在更新数据的时候,先更新了数据库,后更新了缓存,一旦缓存更新失败,此时数据库和缓存数据会不一致.反过来,如果先更新缓存,再更新数据库,一旦缓存更新成功, ...

  5. css兼容问题收集+部分效果收集+css重置

    1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...

  6. htm、html、shtml区别。（web服务器配置ssi）

    转载源:http://www.divcss5.com/html/h59.shtml 首先htm.html.shtml都是静态网页的后缀,三者也可以说都是只是扩展名不同,其他一样,都是静态的网页.Htm ...

  7. 原生js实现深度克隆

    总体思路: 判断对象当中的值为引用值还是原始值 如果是引用值,判断是数组还是对象,如果是原始值直接copy 递归 注意:不要忘了排除null,因为typeof null = 'object' func ...

  8. element ui中的一些小技巧

    最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台.  遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...

  9. STM32 时钟系统

    1.在 STM32F4 中,有 5 个最重要的时钟源,为 HSI.HSE.LSI.LSE.PLL.其中 PLL 实际是分为两个时钟源,分别为主 PLL 和专用 PLL. 2.   ①.LSI 是低速内 ...

  10. linux extglob模式 和rm反选，除了某个文件外的其他文件全部删除的命令

    1.extglob模式开启之后Shell可以另外识别出5个模式匹配操作符,能使文件匹配更加方便. 不然不识别 #开启命令: shopt -s extglob #关闭命令: shopt -u extgl ...