多個文件上傳，一般處理程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="boots/jquery-1.10.2.js"></script>
<link href="boots/bootstrap.min.css" rel="stylesheet" />
<script src="boots/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
文件上傳
</div>
<div class="panel-body">
<div class="form-group">
<div id="lalalala" style="border:1px solid #cbb0b0; display:none; color:#b01111">
<button type="button" class="close" onclick="Guan()">×</button>
上傳完成！
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-3">
<input type="file" id="file" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-3">
<input type="file" id="file1" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-3">
<input type="file" id="file2" class="form-control" />
</div>
</div>
</div>
<span id="output" style="font-size: 12px">等待</span>
<div class="progress progress-striped">
<div id="progressBar" class=" progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span id="spannn" style="color:white"></span>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-3">
<input type="button" onclick="uploadFile()" class="btn btn-primary" value="上傳" />
<input type="button" class="btn btn-primary" value="重置" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
function uploadFile() {
$("#upload").attr("disabled", "disabled");
var file1 = $("#file1")[0].files[0],
fileNum = file1.length;
var name1 = file1.name;
var file2 = $("#file2")[0].files[0],
fileNum = file2.length;
var name2 = file2.name;
var file = $("#file")[0].files[0], //文件對象
fileNum = $("#file")[0].files[0].length,
name = file.name, //文件名
size = file.size + file1.size + file2.size, //總大小
succeed = 0;
var shardSize = 2 * 1024 * 1024, //以2MB為一個分片
shardCount = Math.ceil(size / shardSize);
$(‘#progressBar‘).css("width", "0%")
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("data1", file1.slice(start, end)); //slice方法用於切出文件的一部分
form.append("name1", name1);
form.append("data2", file2.slice(start, end)); //slice方法用於切出文件的一部分
form.append("name2", name2);
form.append("total", shardCount); //總片數
form.append("index", i + 1); //當前是第幾片
//Ajax提交
$.ajax({
url: "/Hander/Handler1.ashx",
type: "POST",
data: form,
async: true, //異步
processData: false, //很重要，告訴jquery不要對form進行處理
contentType: false, //很重要，指定為false才能形成正確的Content-Type
success: function () {
++succeed;
$("#output").text(succeed + " / " + shardCount);
var percent = ((succeed / shardCount).toFixed(2)) * 100;
console.log(percent);
updateProgress(percent);
if (succeed == shardCount) {
$("#upload").removeAttr("disabled");
}
}
});
}
}
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‘).attr(‘data-transitiongoal‘, percentage)//.progressbar({ display_text: ‘fill‘ });
$("#spannn").text(percentage + "%");
$(‘#progressBar‘).css("width", percentage + "%");
if (percentage == 100) {
$("#lalalala").css("display", "block");
}
}
function Guan() {
$("#lalalala").css("display", "none");
}
</script>
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
namespace 上傳文件進度條.Hander
{
/// <summary>
/// Handler1 的摘要說明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
try
{
//從Request中取參數，註意上傳的文件在Requst.Files中
string name = context.Request["name"];
string name1 = context.Request["name1"];
string name2 = context.Request["name2"];
int total = Convert.ToInt32(context.Request["total"]);
int index = Convert.ToInt32(context.Request["index"]);
var data = context.Request.Files["data"];
var data1 = context.Request.Files["data1"];
var data2 = context.Request.Files["data2"];
//保存一個分片到磁盤上
string dir = context.Request.MapPath("/Models/");
string file = Path.Combine(dir, name );
string file1 = Path.Combine(dir, name1 );
string file2 = Path.Combine(dir, name2 );
data.SaveAs(file);
data1.SaveAs(file1);
data2.SaveAs(file2);
//如果已經是最後一個分片，組合
//當然你也可以用其它方法比如接收每個分片時直接寫到最終文件的相應位置上，但要控制好並發防止文件鎖沖突
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;
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
多個文件上傳，一般處理程序