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

随机推荐

shiro的DelegatingFilterProxy怎么找到ShiroFilterFactoryBean
首先看到web.xml中的配置 <context-param> <param-name>contextConfigLocation</param-name> < ...
Ubuntu 18.04编译AOSP源码
总结一下我从Ubuntu 18.04下编译成功AOSP的过程,以及遇到的坑我的电脑配置: OS: Ubuntu 18.04 bionic Kernel: x86_64 Linux 4.18.0-17 ...
git rebase 合并多次提交.
一.应用场景为什么需要合并多个提交呢? 常常一个功能的开发,修修补补 commit 了 n 多次,带来的结果就是提交过多过杂,不够直观,究竟哪些提交是对应这个功能的呢?还有就是,如果我要将这个功能迁 ...
windows根据端口号杀进程
有时候eclipse会被卡死, 结束进程后重新启动项目会出现端口已经被占用这时候需要杀掉进程 1, cmd打开dos窗口 2, netstat -ano | findstr "端口号&qu ...
Linux内存管理 (5)slab分配器
专题:Linux内存管理专题关键词:slab/slub/slob.slab描述符.kmalloc.本地/共享对象缓冲池.slabs_partial/slabs_full/slabs_free.ava ...
Java核心技术第五章——1.类、超类、子类（2）
继上一篇Java核心技术第五章——1.类.超类.子类(1) 6.重载解析假如调用ClassName.Method(args) 1.编译器列出类ClassName所有名为Method的方法. 2.编译 ...
PERL学习笔记---正则表达式的应用
使用m//匹配 //这是m//(模式匹配)的一种简写.同qw//操作一样,可以使用任何成对的分隔符.因此,可以使用m(fred), m<fred>, m{fred}, m[fred],或者 ...
Google 工程师：为什么 CDN 对移动客户端加速“没有”效果
王者荣耀是近两年来比较火的手游,不少小伙伴都有玩过.玩这个游戏最怕的不是遇到猪一般的队友,也不是怕遇到神一样的对手.最让我们感到害怕和绝望的是,团战爆发时,而你 460 了.460 是一个玩家常用的词 ...
ES 05 - 通过Kibana管理Elasticsearch集群服务
目录 1 检查集群的健康状况 2 查看集群中的节点个数 3 查看集群中的索引 4 简单的索引操作 4.1 创建索引 4.2 删除索引在本篇文章之前, 需要完成: ① 启动Elasticsearch服 ...
谈谈axios配置请求头content-type
现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,鉴于我平时在撸码中用的是vue技术栈,今天这里来谈谈我们常用的发Ajax请求的一个插件-axios. > 现在网上可能发送 ...

bootstarp 多图片上传 带进度条

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

随机推荐

热门专题

bootstarp 多图片上传带进度条

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