<!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基础知识之文件的权限（一）

    Linux基础知识之文件权限(一) Linux优点之一就是它拥有多用户多任务的环境,在提供文件共享的同时也能保证用户文件的安全性.所以,设置文件的权限管理变得尤为重要. 权限讲解 [der@Der ~ ...

  2. bzoj 1787 && bzoj 1832: [Ahoi2008]Meet 紧急集合（倍增LCA）算法竞赛进阶指南

    题目描述 原题连接 Y岛风景美丽宜人,气候温和,物产丰富. Y岛上有N个城市(编号\(1,2,-,N\)),有\(N-1\)条城市间的道路连接着它们. 每一条道路都连接某两个城市. 幸运的是,小可可通 ...

  3. LoadRunner（3）

    一.性能测试的策略 重要的:基准测试.并发测试.在线综合场景测试 递增测试.极限测试... 1.基准测试:Benchmark Testing 含义:就是单用户测试,单用户.单测试点.执行n次: 作为后 ...

  4. java面试知识记录

    1.数据库 (1)数据库优化      面试求职:数据库常见面试题(数据库优化思路) 数据库优化方案整理 (2)数据库的事务 MySQL——事务(Transaction)详解 MySQL 事务 2.设 ...

  5. CentOS7 内核优化 修改参数

    一:内核简介 内核是操作系统最基本的部分.它是为众多应用程序提供对计算机硬件的安全访问的一部分软件,这种访问是有限的,并且内核决定一个程序在什么时候对某部分硬件操作多长时间. 内核的分类可分为单内核和 ...

  6. JavaScript 基础知识梳理——事件

    事件 1)事件是文档或浏览器窗口中发生的特定的交互瞬间. JavaScript和HTML之间的交互是通过事件实现的. 2)事件流——描述的是从页面中接受事件的顺序 IE——事件冒泡流 Netscape ...

  7. vulkan 的icb

    https://www.khronos.org/registry/vulkan/specs/1.1-extensions/html/chap30.html#device-generated-comma ...

  8. PHP函数相关知识点

    回调函数 <?php function myfunc($funcname,$name) { $name = "喜欢".$name; $funcname($name); } f ...

  9. Python3-list

    list = ['abcd', 786, 2.23, 'runoob', 70.2] tinylist = [123, 'runoob'] print(list) # 输出完整列表 print(lis ...

  10. MyBatis注解Annotation介绍及Demo(转)

    MyBatis可以利用SQL映射文件来配置,也可以利用Annotation来设置.MyBatis提供的一些基本注解如下表所示. 注解 目标 相应的XML 描述 @CacheNamespace 类 &l ...