bootstarp 多图片上传带进度条

前台代码如下：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

</head>

<link href="Content/bootstrap.css" rel="stylesheet" />

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

<script src="Scripts/bootstrap.js"></script>

<style>

.head {

margin-top: 20px;

}

</style>

<script>

function uploadFile() {

//获取所有的文件控件

var upfiles = $("input[type=file]");

//所有文件的分页数

var filesCountSum = 0;

//设置进度条初始值为0

$('.progress .progress-bar')[0].style = "width:0%";

$("#progressBar")[0].innerText = "0%";

//移除提示框内容、清空文本

$("#alertBox").removeClass();

$("#alertBox").text("");

//设置上传、重置按钮为禁用状态

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

$("#reset").addClass("disabled");

if (upfiles[0].files[0] == undefined || upfiles[1].files[0] == undefined || upfiles[2].files[0] == undefined) {

$("#alertBox").addClass("alert alert-danger");

$("#alertBox").text("请上传3个文件");

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

$("#reset").removeClass("disabled");

} else {

//计算所有的文件分片总数

upfiles.each(function () {

size = $(this)[0].files[0].size;

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

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

})

var succeed = 0;

upfiles.each(function () {

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

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

name = file.name, //文件名

size = file.size; //总大小

//succeed =0; //记录成功的片数

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

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

for (var i = 0; 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 + 1); //当前是第几片

//Ajax提交

$.ajax({

url: "Handler1.ashx",

type: "POST",

data: form,

async: true, //异步

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

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

success: function () {

++succeed;

//显示上传了多少片

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

var percent = ((succeed / filesCountSum).toFixed(2)) * 100;

updateProgress(percent);

if (succeed == filesCountSum) {

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

$("#reset").removeClass("disabled");

$("#alertBox").addClass("alert alert-success");

$("#alertBox").text("上传成功");

}

},

error: function () {

//如果失败则提示框显示

$("#alertBox").addClass("alert alert-danger");

$("#alertBox").text("上传失败");

}

});

}

})

}

}

//用来延时显示更好的效果

function progress(percent, $element) {

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

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

}

function updateProgress(percentage) {

$('.progress .progress-bar')[0].style = "width:" + percentage + "%";

$("#progressBar")[0].innerText = percentage + "%";

}

//重置

function resetInpu() {

$("input").each(function () {

$("#output").text("")

//标签清空进度条为0

$(this).val("");

$('.progress .progress-bar')[0].style = "width:0%";

$("#progressBar")[0].innerText = "0%";

//移除提示框内容、清空文本

$("#alertBox").removeClass();

$("#alertBox").text("");

})

}

</script>

<body>

<div class="container head">

<div class="row">

<div class="panel panel-primary">

<div class="panel-heading">上传文件</div>

<div class="panel-body">

<div class="" id="alertBox"></div>

<div class="input-group">

<span class="input-group-addon" id="basic-addon1">文件1</span>

<input type="file" id="file" class="form-control" placeholder="Username" aria-describedby="basic-addon1">

</div>

<br />

<div class="input-group">

<span class="input-group-addon" id="basic-addon1">文件2</span>

<input type="file" id="file2" class="form-control" placeholder="Username" aria-describedby="basic-addon1">

</div>

<br />

<div class="input-group">

<span class="input-group-addon" id="basic-addon1">文件3</span>

<input type="file" id="file3" class="form-control" placeholder="Username" aria-describedby="basic-addon1">

</div>

<br />

<!--进度条-->

<div class="progress">

<div id="progressBar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100">

456456

</div>

</div>

<!--按钮-->

<div class="col-md-12 text-center">

<button id="upload" onclick="uploadFile();" class="btn btn-primary">上传</button>

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

<button id="reset" onclick="resetInpu()" class="btn btn-primary">重置</button>

</div>

<form class="form-horizontal"></form>

</div>

</div>

</div>

</div>

</body>

</html>

后台使用一般处理程序：

代码如下：

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Web;

namespace WebApplication1

{

/// <summary>

/// Handler1 的摘要说明

/// </summary>

public class Handler1 : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

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("/File");

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 = 1; 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 e)

{

throw;

}

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

}

public bool IsReusable

{

get

{

return false;

}

}

}

}

bootstarp 多图片上传带进度条的更多相关文章

MVC 图片上传带进度条（转）
MVC 图片上传小试笔记 form.js 这个插件已经是很有名的,结合MVC的html辅助方法异步上传就很简单了.jQuery Form Plugin :http://www.malsup.com/j ...
一般处理程序、Ajax多图片上传带进度条
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <tit ...
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
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 ...
HTML5多图片拖拽上传带进度条
前言昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...
html5 文件上传带进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
Struts2文件上传带进度条，虽然不是很完美
好久没有写东西,最近在做个项目,要用到文件h 传的,以前虽然也做上传,但是总觉得不好用 ,现在和队友合作做了一个带进度条的上传,觉得还行~~和大家分享一下. 首先说一下大概是这样实现的,在我们平时的上 ...
jQuery.uploadify-----文件上传带进度条，支持多文件上传的插件
借鉴别人总结的uploadify:基于jquery的文件上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,控制文件上传大小,删除已上传文件. uploadify有两个版本,一个用f ...
Flex4/Flash多文件上传(带进度条)实例分享
要求必备知识本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上演示地址演 ...

随机推荐

SharePoint布局页引用（实战）
分享人:广州华软极简一. 前言 SharePoint 布局页可使用在任何可引用页面布局的页面,学会在页面直接引用页面布局,可实现无代码形式修改页面.此文讲述2种常用使用页面布局方式.本文适用于初学 ...
npm 模块化管理
我们要使用 npm 进行包管理,首先我们得安装 npm,怎么安装?其实只要你安装了 node,那便相当于安装了 npm: node下载地址:http://nodejs.cn/download/ 由于 ...
rabbitmq消费者“无故消失”
hi,all 导读:9月1号17:12左右,发现影子队列存在大量“unacked”(收到了消息,但是还没有手动确认消息)的消息,一段时间后“unacked”的数量没有减少,但是观察消费者端的日志, ...
仓储repository概念
1.为什么要用仓储?(仓储有什么用) 1.1 解耦为了解耦领域层与数据映射层的关系. 1.2 管理增删查改仓储模式最大的优点就是所有的数据访问首先是通过仓库的,对仓库的增删改都不会立即提交到数据库 ...
爬虫框架之Scrapy（二）
递归解析糗事百科递归解析在前面的例子里只是爬取了糗事百科热门的第一个页面,但是当我们需要爬取更多的页面时,需要对每个页面的url依次发起请求,然后通过解析的方法进行作者和标题的解析. 我们可以构建 ...
【Dubbo篇】--Dubbo框架的使用
一.前述 Dubbo是一种提供高性能,透明化的RPC框架.是阿里开源的一个框架. 官网地址:http://dubbo.io/ 二.架构组件解释: Provider: 提供者.发布服务的项目.Regi ...
Java进阶篇设计模式之四 -----适配器模式和桥接模式
前言在上一篇中我们学习了创建型模式的建造者模式和原型模式.本篇则来学习下结构型模式的适配器模式和桥接模式. 适配器模式简介适配器模式是作为两个不兼容的接口之间的桥梁.这种类型的设计模式属于结构型 ...
Redis 概念以及底层数据结构
Redis 简介 REmote DIctionary Server(Redis) 是一个由SalvatoreSanfilippo写的key-value存储系统. Redis是一个开源的使用ANSI C ...
Entity Framework 查漏补缺（二）
数据加载如下这样的一个lamda查询语句,不会立马去查询数据库,只有当需要用时去调用(如取某行,取某个字段.聚合),才会去操作数据库,EF中本身的查询方法返回的都是IQueryable接口. 链接: ...
Virtual Box虚拟机Ubuntu系统安装及基本配置
Linux简介什么是 Linux? Linux:世界上不仅只有一个 Windows 操作系统,还有 Linux.mac.Unix 等操作系统.桌面操作系统下 Windows 是霸主,而 Linux ...

bootstarp 多图片上传 带进度条

bootstarp 多图片上传 带进度条的更多相关文章

随机推荐

热门专题

bootstarp 多图片上传带进度条

bootstarp 多图片上传带进度条的更多相关文章