<!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. 使用python2与python3创建一个简单的http服务(基于SimpleHTTPServer)

    python2与python3基于SimpleHTTPServer创建一个http服务的方法是不同的: 一.在linux服务器上面检查一下自己的python版本:如: [root@zabbix ~]# ...

  2. linux 的环境变量的配置文件

    原文:https://www.cnblogs.com/yuemw/p/8081219.html ---------------------------------------------------- ...

  3. Centos7静态ip设置（亲测有效）

    本文引自:https://www.cnblogs.com/toov5/p/10340395.html,特此鸣谢 最近想测试消息中间件等各类web集群相关技术,这就需要解决linux主机之间互联互通的若 ...

  4. HDU 6049 - Sdjpx Is Happy | 2017 Multi-University Training Contest 2

    思路来源于 FXXL - - 一个比较奇怪的地方就是第三步可以不做,也就是ans至少为1,听说场内有提问的,然后 admin 说可以不做- - (wa的我心烦) /* HDU 6049 - Sdjpx ...

  5. 【转】pe结构详解

    (一)基本概念 PE(Portable Execute)文件是Windows下可执行文件的总称,常见的有DLL,EXE,OCX,SYS等, 事实上,一个文件是否是PE文件与其扩展名无关,PE文件可以是 ...

  6. 怎么把word文档粘贴到编辑器里啊?

    很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...

  7. Rapid Object Detection using a Boosted Cascade of Simple Features 部分翻译

    Rapid ObjectDetection using a Boosted Cascade of Simple Features 使用简单特征级联分类器的快速目标检测 注:部分翻译不准处以红色字体给出 ...

  8. mac使用brew安装的PHP替换自带的PHP

    在.zshrc文件后面加上 export PATH="$(brew --prefix homebrew/php/php56)/bin:$PATH"

  9. node中的http内置模块

    Node.js开发的目的就是为了用JavaScript编写Web服务器程序.因为JavaScript实际上已经统治了浏览器端的脚本,其优势就是有世界上数量最多的前端开发人员.如果已经掌握了JavaSc ...

  10. Python地理信息数据可视化

    地图 基础铺垫 定义 地图(map):是指按一定的比例运用符号.颜色.文字标记等描绘显示地球表面的自然地理.行政区域.社会经济状况的图形. 地图绘制步骤 绘制需要展示的地图,获取地图对象,获取每个区域 ...