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

随机推荐

第一次JVM分析记录：Out of Memory Error (workgroup.cpp:96), pid=6196, tid=139999645685504
tomcat的catalina.out日志报错如下: Exception in thread "http-bio-8081-Acceptor-0" java.lang.OutOfM ...
MsSql去掉重复记录
假如有这样一张表news:字段:id,title,time,image,author,现在表中有1万多条记录,其中title重复的有上千条.如何才能一次性将title重复记录删除呢? ID Title ...
二、redis命令简单使用（不区分大小写）
key * 查看redis中的所有键(当键的数量较多会影响性能,不建议生产环境中使用) exists key 判断一个键是否存在,存在返回1,否则返回0 del key [key...] 删除 ...
bat脚本+diskpart 脚本实现自动划分磁盘分区
我提供的脚本只是案例展示,真实场景需要自行修改.(正好我今天看到一个规范的bat脚本,我放出来,大家一起学习下) 要求:将20G的磁盘1,分出4G为主分区,4G扩展分区(2个2G逻辑分区) 试验环境: ...
Kali Linux 渗透测试手册（1.1）安装虚拟机
翻译来自:掣雷小组成员信息: thr0cyte, Gr33k, 花花, 小丑, R1ght0us, 7089bAt, 一．配置KALI Linux和渗透测试环境在这一章,我们将覆盖以下内容: 在W ...
使用 Moq 测试.NET Core 应用 -- 其它
第一篇文章, 关于Mock的概念介绍: https://www.cnblogs.com/cgzl/p/9294431.html 第二篇文章, 关于方法Mock的介绍: https://www.cnbl ...
Java下载创建好的Excel模板
1.废话不多说,直接上源码 //从数据库取数据创建表格 private HSSFWorkbook exportStudentInfo(List<ExamStudentVo> student ...
Docker 查看镜像信息
欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 资深架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 文章首发个人网站: https://ww ...
微信小程序初体验，入门练手项目--通讯录，部署上线(二)
接上一篇<微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器>:https://www.cnblogs.com/chengxs/p/9898670.html 开发微信小程序最尴尬 ...
安恒杯 3月线上个人赛WriteUp
#前言这次做的还挺多的,只有个Web300没做出来,排名由上次60+进步到这次16名(最后三分钟掉了5名),感觉还是不错的.但是很明显,流量题有很大的运气成分.做完流量题之后还剩一个多小时,水了水M ...

bootstarp 多图片上传 带进度条

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

随机推荐

热门专题

bootstarp 多图片上传带进度条

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