多个文件上传，一般处理程序

发布时间：2023-09-06 01:20责任编辑：熊小新关键词：文件上传

<!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 >
<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 + "% ");
}

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;
}
}
}
}

多个文件上传，一般处理程序

原文地址：http://www.cnblogs.com/cyh1995/p/7741815.html

多个文件上传，一般处理程序

知识推荐