1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>文件上传</title>
6 <link href="Css/bootstrap.css" rel="stylesheet" />
7 <script src="Script/jquery-1.10.2.js"></script>
8 <script src="Script/bootstrap.js"></script>
9 <script>
10
11 function uploadFile() {
12 //获取所有的文件控件
13 var upfiles = $("input[type=file]");
14 //所有文件的分页数
15 var filesCountSum = 0;
16
17 //设置进度条初始值为0
18 $('.progress .progress-bar')[0].style = "width:0%";
19 $("#progressBar")[0].innerText = "0%";
20 //移除提示框内容、清空文本
21 $("#alertBox").removeClass();
22 $("#alertBox").text("");
23 //设置上传、重置按钮为禁用状态
24 $("#upload").addClass("disabled");
25 $("#reset").addClass("disabled");
26
27 //判断文件删除了几个
28 if (upfiles[0].files[0] == undefined || upfiles[1].files[0] == undefined || upfiles[2].files[0] == undefined) {
29 $("#alertBox").addClass("alert alert-danger");
30 $("#alertBox").text("请上传3个文件");
31 $("#upload").removeClass("disabled");
32 $("#reset").removeClass("disabled");
33 } else {
34 //计算所有的文件分片总数
35 upfiles.each(function () {
36 size = $(this)[0].files[0].size;
37
38 var shardSize = 2 * 1024 * 1024; //以2MB为一个分片
39 filesCountSum += Math.ceil(size / shardSize); //总片数
40
41 })
42
43 var succeed = 0;
44 upfiles.each(function () {
45 var file = $(this)[0].files[0], //文件对象
46 fileNum = $("#file")[0].files[0].length,
47 name = file.name, //文件名
48 size = file.size; //总大小
49 //succeed =0; //记录成功的片数
50 var shardSize = 2 * 1024 * 1024, //以2MB为一个分片
51 shardCount = Math.ceil(size / shardSize); //总片数
52
53
54 //一个文件标签有多个文件的上传
55 //var ss = $(this)[0].files;
56 //for (var i = 0; i < ss.length; i++) {
57 // console.log(ss[i])
58 //}
59
60 for (var i = 0; i < shardCount; ++i) {
61 //计算每一片的起始与结束位置
62 var start = i * shardSize,
63 end = Math.min(size, start + shardSize);
64 //构造一个表单，FormData是HTML5新增的
65 var form = new FormData();
66 form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分
67 form.append("name", name);
68 form.append("total", shardCount); //总片数
69 form.append("index", i + 1); //当前是第几片
70 //Ajax提交
71 $.ajax({
72 url: "/Handlers/UpLoad.ashx",
73 type: "POST",
74 data: form,
75 async: true, //异步
76 processData: false, //很重要，告诉jquery不要对form进行处理
77 contentType: false, //很重要，指定为false才能形成正确的Content-Type
78 success: function () {
79 ++succeed;
80 //显示上传了多少片
81 $("#output").text(succeed + " / " + filesCountSum);
82 var percent = ((succeed / filesCountSum).toFixed(2)) * 100;
83 updateProgress(percent);
84 if (succeed == filesCountSum) {
85 $("#upload").removeClass("disabled");
86 $("#reset").removeClass("disabled");
87 $("#alertBox").addClass("alert alert-success");
88 $("#alertBox").text("上传成功");
89 }
90 },
91 error: function (req, status, msg) {
92 //如果失败则提示框显示
93 $("#alertBox").addClass("alert alert-danger");
94 $("#alertBox").text(msg);
95 }
96 });
97 }
98 })
99 }
100
101
102 }
103 //用来延时显示更好的效果
104 function progress(percent, $element) {
105 var progressBarWidth = percent * $element.width() / 100;
106 $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
107 }
108
109 //修改精度条的长度显示当前删除到哪里
110 function updateProgress(percentage) {
111 $('.progress .progress-bar')[0].style = "width:" + percentage + "%";
112 $("#progressBar")[0].innerText = percentage + "%";
113 }
114
115 //重置
116 function resetInpu() {
117 $("input").each(function () {
118 $("#output").text("")
119 //标签清空进度条为0
120 $(this).val("");
121 $('.progress .progress-bar')[0].style = "width:0%";
122 $("#progressBar")[0].innerText = "0%";
123 //移除提示框内容、清空文本
124 $("#alertBox").removeClass();
125 $("#alertBox").text("");
126 })
127 }
128 </script>
129
130
131
132 </head>
133 <body>
134 <div class="container head">
135 <div class="row">
136 <div class="panel panel-primary">
137 <div class="panel-heading">上传文件</div>
138 <div class="panel-body">
139 <!--提示框-->
140 <div class="" id="alertBox"></div>
141
142
143 <div class="input-group">
144 <span class="input-group-addon" id="basic-addon1">文件1</span>
145 <input type="file" id="file" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
146 </div>
147 <br />
148
149 <div class="input-group">
150 <span class="input-group-addon" id="basic-addon1">文件2</span>
151 <input type="file" id="file2" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
152 </div>
153 <br />
154
155 <div class="input-group">
156 <span class="input-group-addon" id="basic-addon1">文件3</span>
157 <input type="file" id="file3" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
158 </div>
159 <br />
160
161
162 <!-- 进度条 -->
163 <div class="progress">
164 <div id="progressBar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100">
165 456456
166 </div>
167 </div>
168
169 <!-- 点击按钮 -->
170 <div class="col-md-12 text-center">
171 <button id="upload" onclick="uploadFile()" class="btn btn-primary">上传</button>
172
173 <span id="output" style="font-size: 12px">等待</span>
174
175 <button id="reset" onclick="resetInpu()" class="btn btn-primary">重置</button>
176
177 </div>
178
179 <form class="form-horizontal"></form>
180 </div>
181 </div>
182 </div>
183 </div>
184 </body>
185 </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;
}
}
}
}
