<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <script src="../js/jquery.js"></script>

</head>

<body>

<h2>HTML5异步上传文件，带进度条(jQuery)</h2>

<form method="post" enctype="multipart/form-data"><br/><br/>

    选择要上传的文件：<br/>

    <input type="file" name="file"/><span></span><br/>

    <!--<input type="file" name="file"/><span></span><br/>-->

</form>

<br/><br/>

<input type="button" value="提交" onclick="upload()" id="sub"/>

<br/><br/>

上传进度：

<progress></progress>

<br/>

<p id="progress">0 bytes</p>

<p id="info"></p>

</body>

<script>

    var totalSize = 0;

    //绑定所有type=file的元素的onchange事件的处理函数

    $(':file').change(function () {

        var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了

        var name = file.name;

        var size = file.size;

        var type = file.type;

        url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片

        console.log(url);

        $(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + size + " url: " + url);

        totalSize += size;

        $("#info").html("总大小: " + totalSize + "bytes");

    });

    function upload() {

        //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");

        var formData = new FormData($('form')[0]);

        //ajax异步上传

        $.ajax({

            url: "/getFile",

            method: "POST",

            data: formData,

            xhr: function () { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数

                var myXhr = $.ajaxSettings.xhr();

                if (myXhr.upload) { //检查upload属性是否存在

                    //绑定progress事件的回调函数

                    myXhr.upload.addEventListener('progress', progressHandlingFunction, false);

                }

                return myXhr; //xhr对象返回给jQuery使用

            },

            success: function (result) {

                $("#result").html(result.data);

            },

            contentType: false, //必须false才会自动加上正确的Content-Type

            processData: false  //必须false才会避开jQuery对 formdata 的默认处理

        });

    }

    //上传进度回调函数：

    function progressHandlingFunction(e) {

        if (e.lengthComputable) {

            $('progress').attr({value: e.loaded, max: e.total}); //更新数据到进度条

            var percent = e.loaded / e.total * 100;

            $('#progress').html(e.loaded + "/" + e.total + " bytes. " + percent.toFixed(2) + "%");

        }

    }

</script>

</html>

结果：

jQuery上传文件显示进度条的更多相关文章

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

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

  2. ajax上传文件显示进度

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

  3. layui上传文件配合进度条

    首先看一下效果图: 修改layui的源文件upload.js 1.打开layui/modules/upload.js 2.搜索ajax 3.找到url: 4.添加以下代码: ,xhr:l.xhr(fu ...

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

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

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

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

  6. Extjs 使用fileupload插件上传文件 带进度条显示

    一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...

  7. asp.net mvc 实现上传文件带进度条

    本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...

  8. struts2上传文件添加进度条

    给文件上传添加进度条,整了两天终于成功了. 想要添加一个上传的进度条,通过分析,应该是需要不断的去访问服务器,询问上传文件的大小.通过已上传文件的大小, 和上传文件的总长度来评估上传的进度. 实现监听 ...

  9. XMLHttpRequest上传文件实现进度条

    话不多说,直接上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

随机推荐

  1. 05_ Flume多级Agent之间串联案例

    多级agent之间串联: 从tail命令获取数据发送到avro端口,另一个节点可配置一个avro源来获取数据,发送外部存储 启动两个Agent节点: 使用scp命令拷贝flume安装包到另一台虚拟机; ...

  2. Build with runtime packages

    编译问题:为什么我去掉Build with runtime packages,编译没问题??? 如果不去掉,就有错误:[Linker Error] Unresolved external 'TXNet ...

  3. RxJava——扩展的观察者模式

    在学习RxJava的时候,经常提到观察者与被观察者,这不就是JAVA的观察者模式的运用么?是的,但是跟传统意义的上观察者模式还不太一样,所以Rxjava实际上是一种扩展的观察者模式,所以有必要对这个扩 ...

  4. Redis入门（一）——安装

    1.下载地址,选择对应版本 https://github.com/dmajkic/redis/downloads 2.下载解压后,进入到文件夹,地址栏cmd,redis-server.exe redi ...

  5. u-boot器件驱动模型（Device&Drivers）之uclass （转）

    一.剧情回顾 在上一篇链接器的秘密里面我们讲到我们用一些特殊的宏让链接器帮我们把一些初始化好的结构体列好队并安排在程序的某一个段里面,这里我例举出了三个和我们主题相关段的分布情况,它们大概如下图所示: ...

  6. pandas.to_json&to_dict&from_json&from_dict解读

    pandas 中的to_dict 可以对DataFrame类型的数据进行转换 可以选择六种的转换类型,分别对应于参数 ‘dict’, ‘list’, ‘series’, ‘split’, ‘recor ...

  7. 嵌入式linux修改日期时间

    命令格式为: date -s 时间字符串 例如只修改系统的日期,不修改时间(时分秒) date -s 2012-08-02 或只修改时间不修改日期 date -s 10:08:00 当然也可以同时修改 ...

  8. RecursiveTask和RecursiveAction的使用 以及java 8 并行流和顺序流（转）

    什么是Fork/Join框架        Fork/Join框架是Java7提供了的一个用于并行执行任务的框架, 是一个把大任务分割成若干个小任务,最终汇总每个小任务结果后得到大任务结果的框架. 我 ...

  9. mysql 指令

    // 授予用户某些权限GRANT ALL ON *.* TO 'USER'@'HOST';// 进入mysql访问特定数据库mysql -u user -p database_name// 查看数据表 ...

  10. THUWC2020 游记

    不知道标题该叫什么,那就叫游记吧.反正是来玩的. CSP-S 排到我省三十几名,也不知怎么就过了 THU 的初审. Day0 到了宾馆.和 cy 划了一晚上. 发现自己不会做这次月考数学题,丢人啊丢人 ...