一般处理程序、Ajax多图片上传带进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文件上传</title>
<link href="Css/bootstrap.css" rel="stylesheet" />
<script src="Script/jquery-1.10.2.js"></script>
<script src="Script/bootstrap.js"></script>
<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); //总片数
//一个文件标签有多个文件的上传
//var ss = $(this)[0].files;
//for (var i = 0; i < ss.length; i++) {
// console.log(ss[i])
//}
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: "/Handlers/UpLoad.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 (req, status, msg) {
//如果失败则提示框显示
$("#alertBox").addClass("alert alert-danger");
$("#alertBox").text(msg);
}
});
}
})
}
}
//用来延时显示更好的效果
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>
</head>
<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.Linq;
using System.Web;
using System.IO;
namespace BaWei.UpLoadFile.Web.Handlers
{
/// <summary>
/// 文件上传的一般处理程序
/// </summary>
public class UpLoad : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
try
{
//获取上传文件的名称
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)
{
context.Response.Write(e.Message.ToString());
}
//返回是否成功，此处做了简化处理
//return Json(new { Error = 0 });
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
一般处理程序、Ajax多图片上传带进度条的更多相关文章
- MVC 图片上传 带进度条（转）
MVC 图片上传小试笔记 form.js 这个插件已经是很有名的,结合MVC的html辅助方法异步上传就很简单了.jQuery Form Plugin :http://www.malsup.com/j ...
- bootstarp 多图片上传 带进度条
前台代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- ajax实现图片上传与进度条
这里使用的是bootstract的一个插件来实现 详情请查看文档中的进度条 https://v3.bootcss.com/components/ 引入必要的文件 <link href=" ...
- 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 + AJAX ( jQuery版本 ) 文件上传带进度条
页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...
- Struts2文件上传带进度条，虽然不是很完美
好久没有写东西,最近在做个项目,要用到文件h 传的,以前虽然也做上传,但是总觉得不好用 ,现在和队友合作做了一个带进度条的上传,觉得还行~~和大家分享一下. 首先说一下大概是这样实现的,在我们平时的上 ...
- ajax异步文件上传和进度条
一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...
随机推荐
- 【题解】Luogu P5284 [十二省联考2019]字符串问题
原题传送门 我用sa做的本题 (码量似乎有点大) 先对原串建sa 考虑如何建图: 从大到小枚举长度len 先将height中等于len的两个位置在并查集合并起来,将lst也合并(lst是链表) 再将长 ...
- 蒙德里安的梦想【状压DP】
求把N*M的棋盘分割成若干个1*2的的长方形,有多少种方案. 例如当N=2,M=4时,共有5种方案.当N=2,M=3时,共有3种方案. 如下图所示: 输入格式 输入包含多组测试用例. 每组测试用例占一 ...
- 【转载】RESTful 架构风格概述
本文转载自https://blog.igevin.info/posts/restful-architecture-in-general/ 在移动互联网的大潮下,随着docker等技术的兴起,『微服务』 ...
- 6、Docker存储卷
Why Data Volumes? 来自马哥教育 Data volumes Volume types 绑定挂载卷:在宿主机和容器上各指明绑定路径才能进行绑定. docker管理卷:在容器内指定挂载 ...
- 【HNOI 2018】毒瘤
Problem Description 从前有一名毒瘤. 毒瘤最近发现了量产毒瘤题的奥秘.考虑如下类型的数据结构题:给出一个数组,要求支持若干种奇奇怪怪的修改操作(例如给一个区间内的数同时加上 \(c ...
- anaconda中安装TensorFlow的方法
作为一个新手党加手残党真的折腾了好久才搞定,记录一下. step1:在anaconda prompt终端中输入 pip3 install -i https://pypi.tuna.tsinghua.e ...
- C语言-第6次作业
1.本章学习总结 1.1思维导图 1.2 本章学习体会 学习感受:先是接触到网络工程导论的建立文件的方式,觉得很方便很好用,而后直接从代码的层面建立文件,觉得很新奇,更加方便,随着大作业的一步一步升级 ...
- JS 基本类型和引用类型---JS 学习笔记（一）
本文参考了focusxxxxy的博客,感谢他的知识分享. 一 基本类型和引用类型的值 ECMAScript 变量包含两种不同数据类型的值:基本类型和引用类型. 也有其他的叫法,比如原始类型和对象类型, ...
- clojure开发环境配置git, vscode+Calva插件配置
万事开头难,全是犄角旮旯的细节. 1 安装lein 参见 https://www.cnblogs.com/xuanmanstein/p/10504401.html 2 创建工程 lein 参考http ...
- 百度ueditor上传图片时如何设置默认宽高度
百度ueditor上传图片时如何设置默认宽高度 一.总结 一句话总结:直接css或者js里面限制一下就好,可以用html全局限制一下图片的最大高度 直接css或者js里面限制一下就好,可以用html全 ...