1.首先实现大文件上传，如果是几兆或者几十兆的文件就用基本的上传方式就可以了，但是如果是大文件上传的话最好是用分片上传的方式。我这里主要是使用在客户端进行分片读取到服务器段，然后保存，到了服务器段读取完了之后将分片数据进行组合。

2.前端代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadTest2.aspx.cs" Inherits="Html5UploadTest.UploadTest2" %>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>HTML5大文件分片上传示例</title>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <link href="bootstrap-progressbar/bootstrap-progressbar-3.3.4.css" rel="stylesheet" />

    <script src="bootstrap-progressbar/bootstrap-progressbar.js"></script>

    <%--<link href="JqueryUI/jquery-ui.css" rel="stylesheet" />

    <script src="JqueryUI/jquery-ui.js"></script>--%>

    <script>

        function uploadFile() {

            $("#upload").attr("disabled", "disabled");

            var file = $("#file")[].files[],  //文件对象

                fileNum = $("#file")[].files[].length,

                name = file.name,        //文件名

                size = file.size,        //总大小

                succeed = ;

            var shardSize =  *  * ,    //以2MB为一个分片

                shardCount = Math.ceil(size / shardSize);  //总片数

            $('.progress .progress-bar').attr('data-transitiongoal', ).progressbar({ display_text: 'fill' });

            for (var i = ; i < shardCount; ++i) {

                //计算每一片的起始与结束位置

                var start = i * shardSize,

                    end = Math.min(size, start + shardSize);

                //构造一个表单，FormData是HTML5新增的

                var form = new FormData();

                form.append("data", file.slice(start, end));  //slice方法用于切出文件的一部分

                form.append("name", name);

                form.append("total", shardCount);  //总片数

                form.append("index", i + );        //当前是第几片

                //Ajax提交

                $.ajax({

                    url: "Upload.ashx",

                    type: "POST",

                    data: form,

                    async: true,        //异步

                    processData: false,  //很重要，告诉jquery不要对form进行处理

                    contentType: false,  //很重要，指定为false才能形成正确的Content-Type

                    success: function () {

                        ++succeed;

                        $("#output").text(succeed + " / " + shardCount);

                        var percent = ((succeed / shardCount).toFixed()) * ;

                        updateProgress(percent);

                        if (succeed == shardCount) {

                            $("#upload").removeAttr("disabled");

                        }

                    }

                });

            }

        }

        function progress(percent, $element) {

            var progressBarWidth = percent * $element.width() / ;

            $element.find('div').animate({ width: progressBarWidth }, ).html(percent + "% ");

        }

        //$(document).ready(function () {

        //    $('.progress .progress-bar').progressbar({ display_text: 'fill' });

        //});

        function updateProgress(percentage) {

            $('.progress .progress-bar').attr('data-transitiongoal', percentage).progressbar({ display_text: 'fill' });

        }

    </script>

</head>

<body>

    <input type="file" id="file" />

    <button id="upload" onclick="uploadFile();">上传</button>

    <span id="output" style="font-size: 12px">等待</span>

    <div class="progress">

        <div id="progressBar" class="progress-bar" role="progressbar" data-transitiongoal=""></div>

    </div>

</body>

</html>

3. 后台一般处理程序如下：

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Web;

namespace Html5UploadTest

{

    /// <summary>

    /// Summary description for Upload

    /// </summary>

    public class Upload : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            try

            {

                //从Request中取参数，注意上传的文件在Requst.Files中

                string name = context.Request["name"];

                int total = Convert.ToInt32(context.Request["total"]);

                int index = Convert.ToInt32(context.Request["index"]);

                var data = context.Request.Files["data"];

                //保存一个分片到磁盘上

                string dir = context.Request.MapPath("~/temp");

                string file = Path.Combine(dir, name + "_" + index);

                data.SaveAs(file);

                //如果已经是最后一个分片，组合

                //当然你也可以用其它方法比如接收每个分片时直接写到最终文件的相应位置上，但要控制好并发防止文件锁冲突

                if (index == total)

                {

                    file = Path.Combine(dir, name);

                    //byte[] bytes = null;

                    using (FileStream fs = new FileStream(file, FileMode.OpenOrCreate))

                    {

                        for (int i = ; i <= total; ++i)

                        {

                            string part = Path.Combine(dir, name + "_" + i);

                            //bytes = System.IO.File.ReadAllBytes(part);

                            //fs.Write(bytes, 0, bytes.Length);

                            //bytes = null;

                            System.IO.File.Delete(part);

                            fs.Close();

                        }

                    }

                }

            }

            catch (Exception)

            {

                throw;

            }

            //返回是否成功，此处做了简化处理

            //return Json(new { Error = 0 });

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

4.当然了后台还需要一些异常处理或者断电续传的工作要做，待续。。。

BootStrap Progressbar 实现大文件上传的进度条的更多相关文章

  1. Asp.net mvc 大文件上传 断点续传 进度条

    概述 项目中需要一个上传200M-500M的文件大小的功能,需要断点续传.上传性能稳定.突破asp.net上传限制.一开始看到51CTO上的这篇文章,此方法确实很不错,能够稳定的上传大文件,http: ...

  2. php实现大文件上传带进度条

    1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...

  3. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  4. atitit. 文件上传带进度条 atiUP 设计 java c# php

    atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...

  5. Flex4/Flash多文件上传(带进度条)实例分享

    要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...

  6. .net网站的文件上传读取进度条和断点下载

    文件上传到服务器时的进度读取 //调整上传配置 AdapterInfo(info); UpfileResult result = new UpfileResult(); try { //直接使用req ...

  7. struts2多文件上传(带进度条)demo+说明

    利用plupload插件实现多文件上传,实现图片: 在jsp写入js代码: z<%@ page language="java" contentType="text/ ...

  8. .Net neatupload上传控件实现文件上传的进度条

    1. 引入bin文件 (可以到neatupload官网下载,也可以到教育厅申报系统中找) 2. 将控件加入到工具栏,在工具栏中点鼠标右键,如图: 3. 加入neatuplaod这个文件夹(可以到nea ...

  9. ajax异步文件上传和进度条

    一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

随机推荐

  1. thymelef 布局 fragment

    需求:布局页面, 把首页分成四个页面: header  footer ,content ,aside ,从githua 下载的原型, 所有内容是在一起的,这里拆分, 重用, 减少代码量 做法: 新建页 ...

  2. jvisualvm图解

    http://blog.csdn.net/a19881029/article/details/8432368 jvisualvm能干什么:监控内存泄露,跟踪垃圾回收,执行时内存.cpu分析,线程分析. ...

  3. cookie记录浏览记录

    cookie记录浏览记录 HashMap也是我们使用非常多的Collection,它是基于哈希表的 Map 接口的实现,以key-value的形式存在.在HashMap中,key-value总是会当做 ...

  4. 1个小时学会ReactiveCocoa基本使用

    来源:朱凯奇 链接:http://www.jianshu.com/p/5d966074741a 1.ReactiveCocoa简介 ReactiveCocoa(简称为RAC),是由Github开源的一 ...

  5. DOS和UNIX文本文件之间相互转换的方法

    在Unix/Linux下可以使用file命令查看文件类型,如下: file dosfile.txt 使用dos2unix 一般Linux发行版中都带有这个小工具,只能把DOS转换为UNIX文件,命令如 ...

  6. ASP.NET中常用重置数据的方法

    aspx: <asp:Repeater ID="rptProlist" runat="server" onitemdatabound="rptP ...

  7. wsdl自动生成Java代码，根据wsdl生成Java代码

    wsdl自动生成Java代码,根据wsdl生成Java代码 >>>>>>>>>>>>>>>>>&g ...

  8. PHP程序漏洞产生的原因和防范方法

    滥用include 1.漏洞原因: Include是编写PHP网站中最常用的函数,并且支持相对路径.有很多PHP脚本直接把某输入变量作为Include的参数,造成任意引用脚本.绝对路径泄露等漏洞.看以 ...

  9. 隐藏元素的宽高无法通过原生js获取的问题

    1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...

  10. WEB 中的一些名词解释

    OOP: 面向对象编程(Object Oriented Programming,OOP,面向对象程序设计)是一种计算机编程架构. AOP: AOP为Aspect Oriented Programmin ...