<!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. Form组件 cookie和session

    django form组件 1.渲染标签 2.校验数据 3.展示信息 第一步需要一个form类 from django import forms class MyForm(forms.Form): n ...

  2. 利用Pycharm部署同步更新Django项目文件

    利用Pycharm部署同步更新Django项目文件 这里使用同步更新的前提是你已经在服务器上上传了你的Django项目文件. 在"工具(Tools)"菜单中找到"部署(D ...

  3. 关于linux一些备份、还原，压缩，归档的命令

    15.1 gzipgzip(1) 是GNU的压缩程序.它只对单个文件进行压缩.基本用法如下:$ gzip filename程序执行以后,文件名会变成filename.gz,而且一般情况下大小会比原文件 ...

  4. PHP把数组按指定的个数分隔

    PHP把数组按指定的个数分隔 假设数组为array(‘1’,‘2’,‘3’,‘4’,‘5’,‘6’); 想把它分割成四个,那么结果为array(‘0’ => [‘1’,‘2’],‘1’ => ...

  5. visual studio 和visual studio code 的区别是什么？

    区别有三: 区别一:含义不一样. Visual Studio(简称VS)是美国微软公司的开发工具包系列产品,是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代码 ...

  6. RAID 5 是一种存储性能、数据安全和存储成本兼顾的存储解决方案

    可用容量:(n-1)/n的总磁盘容量(n为磁盘数) 原因:RAID5把数据和相对应的奇偶校验信息存储到组成RAID5的各个磁盘上,并且奇偶校验信息和相对应的数据分别存储于不同的磁盘上,其中任意N-1块 ...

  7. 粗暴，干就完了----徐晓冬似的C语言自学笔记----前言

    10对年前就觉得C/C++语言很酷,第一印象就是90年代末,个人电脑在中华大地开始普及的岁月中,层出不穷的病毒,对了,全是C/C++写的:除了危及人民群众信息安全以外,C系列语言用途甚广,可以发明其他 ...

  8. Gson/Jackson/FastJson工具类

    import java.util.ArrayList; import java.util.List; import java.util.Map; import com.google.gson.Gson ...

  9. jmeter请求参数中文乱码，解决方法

  10. 【Android-Zxing框架】二维码扫描框区域大小与不同手机分辨率适配问题

    Zxing框架进行二维码扫描时候会发现,随着分辨率的增加,扫描框会越来越小,SurfaceView扫描窗口就看不见了,我们可以自己定义扫描窗口的大小,以及适配屏幕问题. Zxing包中有个类Camer ...