标签：namespace primary sum jquery combine ext tle false ota
<!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;
}
}
}
}
标签：namespace primary sum jquery combine ext tle false ota
原文地址：http://www.cnblogs.com/cyh1995/p/7741815.html
