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及以上演示地址演 ...

随机推荐

天津联通新兴ICT业务工程师面试经历
此次是天津联通来我们学校进行校招宣讲,参加的人挺多的.一开始没打印成绩单,临时去打印的,然后排到我的时候以经快结束了 == 面试首先当然是自我介绍啦,就巴拉巴拉了一堆自己的专业,学过什么跟职位相关的 ...
fab 菜单实现—圆形、半圆、扇形、直线、射线
前段时间记录一下fab 菜单实现之前传-钟表表盘,今天终于弄正文了. 本文基于上篇文章的布局方式和位置计算,并参考35 Cool Floating Action Button Animations(h ...
如何通过免费开源的ERP Odoo打造企业全员营销整体解决方案
应用场景的背景故事在一些二级城市,往往线索的来源是通过企业当地口碑积累.熟人转介绍等线下的方式为主,利用互联网的模式往往很难奏效,企业面临的第一个问题就是如何把握线索真实的来源介绍的问题.在这个问题 ...
SqlServer中用SQL语句附加数据库及修改数据库逻辑文件名
--查询数据库逻辑文件名 USE 数据库名 SELECT FILE_NAME(1) --查询数据库逻辑文件名(日志) USE 数据库名 SELECT FILE_NAME(2) --附加数据库 sp_a ...
访问System x3650 IMM2的几种方式
一.通过web浏览器访问 1.打开浏览器,在地址栏上输入IMM2的IP地址访问,打开登录页面后,输入用户名和密码登录 PS:第一次登录IMM2时,初始的用户名为USERID,密码为PASSW0RD( ...
June 30th. 2018, Week 26th. Saturday
Curiosity is the wick in the candle of learning. 如果学习是一根蜡烛,那好奇心就是烛芯. From William Arthur Ward. Pleas ...
2. VIM 系列 - 初探vim配置文件
目录配置文件 .vimrc 基本配置 tab 键设置热键配置配置文件刚安装vim默认配置,功能是很简单的,vim的功能很多是需要配置开启的. .vimrc 使用vim打开配置文件~/.vimr ...
LindAgile.SchedulingTask~设计一个不错的任务调度组件
回到目录 SchedulingTask产生的原因任务调试主要指定期执行某些任务代码,之前用过quartz,感觉有些重,使用时需要添加包包,配置管理项时,对于简单的项目用它就显得有些臃肿了,不如直接上 ...
实例分析C程序运行时的内存结构
先验知识静态变量存储在静态存储区,局部变量存储在动态存储区(栈),代码存放在代码区寄存器,EBP指向栈底,ESP指向栈顶,EIP指向正在执行指令的下一条指令,三个寄存器中保存的都是地址,32位 ...
Nginx反向代理后，java获取客户端真实IP地址
一般情况下,java获取客户端IP地址的方法为request.getRemoteAddr();但这只是在没有网关或者代理的情况下,如果客户端将请求发送到nginx,再由nginx进行反向代理到目标服务 ...

bootstarp 多图片上传 带进度条

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

随机推荐

热门专题

bootstarp 多图片上传带进度条

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