<!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. 如何制作 linux 系统 U盘启动盘

    1.制作linux 系统的U盘启动盘,需要选择ISO 模式!给大家推荐几个制作相关软件以及相关制作过程(点击相应名字即可进入到网站):UltraISO.rufus.老毛桃.大白菜. UltraISO ...

  2. touchgfx -- Integration

    将UI连接到系统 在大多数应用程序中,UI需要以某种方式连接到系统的其余部分,并发送和接收数据.这可以与硬件外围设备(传感器数据,A / D转换,串行通信等)接口,也可以与其他软件模块接口. 本文介绍 ...

  3. 图像处理---《在图片上打印文字 FreeType库》

    图像处理---<在图片上打印文字 FreeType库> 目的:想在处理之后的图像上打印输出结果.方法: (1)只在图像上打印 数字.字母的话:                1.Mat格式 ...

  4. C#中怎么将XML作为参数post到接口

    String xml = "<data>中文</data>"; String postData = "data=" + Server.U ...

  5. 0912 for循环及内置方法

    目录 for 循环 1.循环 2.循环取值 3.range 4.for + break 5.for+continue 6.for + else 数字类型内置方法 整型 浮点型 字符串 1.作用 2.作 ...

  6. zabbix4.0搭建

    一.准备工作 1.yum国内源的安装与更新 1.1 备份原repo文件 cd /etc/yum.repos.d/ mkdir repo_bak mv *.repo repo_bak 1.2 在cent ...

  7. Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'

    方法:重启MySQL 在命令行执行: /etc/init.d/mysql start

  8. HDU 6060 - RXD and dividing | 2017 Multi-University Training Contest 3

    /* HDU 6060 - RXD and dividing [ 分析,图论 ] | 2017 Multi-University Training Contest 3 题意: 给一个 n 个节点的树, ...

  9. Elasticsearch7.1中文文档-第一章-入门

    安装openjdk wget --no-cookies --no-check-certificate --header "Cookie: oraclelicense=accept-secur ...

  10. 51 Nod 1070 Bash游戏v4（斐波那契博弈）

    这题的证明看不太懂,日后再重做... 1070 Bash游戏 V4  基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 有一堆石子共有N个.A B两个 ...