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. WEB DYNPRO SAP HELP

    http://help.sap.com/saphelp_nw70ehp1/helpdata/EN/43/70d83e8cb23d67e10000000a114084/content.htm

  2. C#中npoi操作Excel[版本2.0.1读写2003、2007格式]

    下载npoi2.0.1dll文件:http://download.csdn.net/detail/pukuimin1226/5851747 public static void test1()     ...

  3. java 图片压缩 剪切 水印 转换 黑白 缩放

    专注java已6年,欢迎加入java核心技术QQ群:135138817,每周五晚有群主进行技术讲座. import java.awt.AlphaComposite; import java.awt.C ...

  4. 装有Win7系统的电脑在局域网不能共享的解决方案

    Win7系统的网络功能比XP有了进一步的增强,使用起来也相对清晰.但是由于做了很多表面优化的工作,使得底层的网络设置对于习惯了XP系统的人来说变得很不适应,其中局域网组建就是一个很大的问题.默认安装系 ...

  5. cookie 和 HttpSession

    保存会话数据的两种技术 Cookie Cookie 是客户端技术,程序把每个用户的数据以cookie的形式写给用户的浏览器.当用户使用浏览器再去访问服务器中的web资源时,就会带着各自的数据去.web ...

  6. VS2015+TFS2015源代码管理

    使用Visual Studio连接TFS

  7. jquery.validate.js默认配置，jquery.validate.js自定义提示信息

    jquery.validate.js默认配置,jquery.validate.js自定义提示信息 配置jQuery.validator默认的处理方法 >>>>>>& ...

  8. grunt 构建工具(build tool)初体验

    操作环境:win8 系统,建议使用 git bash (window下的命令行工具) 1,安装node.js 官网下载:https://nodejs.org/  直接点击install ,会根据你的操 ...

  9. css3 文本超出后出现省略号

    clip:当内联内容溢出块容器时,将溢出部分裁切掉. ellipsis:当内联内容溢出块容器时,将溢出部分替换为(...). 当块容器 <' overflow '> 为非visible时, ...

  10. [原创]ie6,7中td和img之间有间隙

    情形描述 开发工具:VS2010: 浏览器版本:IE6以上,火狐,谷歌: 页面布局设计:Table+Img布局: 项目预览问题:火狐,谷歌,IE8以上未出现问题,IE6,IE7图片之间有间隙. 分析原 ...