1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script src="Scripts/jquery-1.10.2.js"></script> 7 <script src="Scripts/bootstrap.min.js"></script> 8 <link href="Scripts/bootstrap.min.css" rel="stylesheet" /> 9 <style> 10 .head { 11 margin-top: 20px; 12 } 13 </style> 14 15 <script> 16 17 function uploadFile() { 18 //获取所有的文件控件 19 var upfiles = $("input[type=file]"); 20 //所有文件的分页数 21 var filesCountSum = 0; 22 23 //设置进度条初始值为0 24 $('.progress .progress-bar')[0].style = "0%"; 25 $("#progressBar")[0].innerText = "0%"; 26 //移除提示框内容、清空文本 27 $("#alertBox").removeClass(); 28 $("#alertBox").text(""); 29 //设置上传、重置按钮为禁用状态 30 $("#upload").addClass("disabled"); 31 $("#reset").addClass("disabled"); 32 33 if (upfiles[0].files[0] == undefined || upfiles[1].files[0] == undefined || upfiles[2].files[0] == undefined) { 34 $("#alertBox").addClass("alert alert-danger"); 35 $("#alertBox").text("请上传3个文件"); 36 $("#upload").removeClass("disabled"); 37 $("#reset").removeClass("disabled"); 38 } else { 39 //计算所有的文件分片总数 40 upfiles.each(function () { 41 size = $(this)[0].files[0].size; 42 43 var shardSize = 2 * 1024 * 1024; //以2MB为一个分片 44 filesCountSum += Math.ceil(size / shardSize); //总片数 45 46 }) 47 48 var succeed = 0; 49 upfiles.each(function () { 50 var file = $(this)[0].files[0], //文件对象 51 fileNum = $("#file")[0].files[0].length, 52 name = file.name, //文件名 53 size = file.size; //总大小 54 //succeed =0; //记录成功的片数 55 var shardSize = 2 * 1024 * 1024, //以2MB为一个分片 56 shardCount = Math.ceil(size / shardSize); //总片数 57 58 59 for (var i = 0; i < shardCount; ++i) { 60 //计算每一片的起始与结束位置 61 var start = i * shardSize, 62 end = Math.min(size, start + shardSize); 63 //构造一个表单，FormData是HTML5新增的 64 var form = new FormData(); 65 form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分 66 form.append("name", name); 67 form.append("total", shardCount); //总片数 68 form.append("index", i + 1); //当前是第几片 69 //Ajax提交 70 $.ajax({ 71 url: "/ASHX/Add.ashx", 72 type: "POST", 73 data: form, 74 async: true, //异步 75 processData: false, //很重要，告诉jquery不要对form进行处理 76 contentType: false, //很重要，指定为false才能形成正确的Content-Type 77 success: function () { 78 ++succeed; 79 //显示上传了多少片 80 $("#output").text(succeed + " / " + filesCountSum); 81 var percent = ((succeed / filesCountSum).toFixed(2)) * 100; 82 updateProgress(percent); 83 if (succeed == filesCountSum) { 84 $("#upload").removeClass("disabled"); 85 $("#reset").removeClass("disabled"); 86 $("#alertBox").addClass("alert alert-success"); 87 $("#alertBox").text("上传成功"); 88 } 89 }, 90 error: function () { 91 //如果失败则提示框显示 92 $("#alertBox").addClass("alert alert-danger"); 93 $("#alertBox").text("上传失败"); 94 } 95 }); 96 } 97 }) 98 } 99 100 101 } 102 //用来延时显示更好的效果 103 function progress(percent, $element) { 104 var progressBarWidth = percent * $element.width() / 100; 105 $element.find('div').animate({ progressBarWidth }, 500).html(percent + "% "); 106 } 107 108 function updateProgress(percentage) { 109 $('.progress .progress-bar')[0].style = "" + percentage + "%"; 110 $("#progressBar")[0].innerText = percentage + "%"; 111 } 112 113 //重置 114 function resetInpu() { 115 $("input").each(function () { 116 $("#output").text("") 117 //标签清空进度条为0 118 $(this).val(""); 119 $('.progress .progress-bar')[0].style = "0%"; 120 $("#progressBar")[0].innerText = "0%"; 121 //移除提示框内容、清空文本 122 $("#alertBox").removeClass(); 123 $("#alertBox").text(""); 124 }) 125 } 126 </script> 127 128 </head> 129 <body> 130 <div class="container head"> 131 <div class="row"> 132 <div class="panel panel-primary"> 133 <div class="panel-heading">上传文件</div> 134 <div class="panel-body"> 135 136 <div class="" id="alertBox"></div> 137 138 139 <div class="input-group"> 140 <span class="input-group-addon" id="basic-addon1">文件1</span> 141 <input type="file" id="file" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> 142 </div> 143 <br /> 144 145 <div class="input-group"> 146 <span class="input-group-addon" id="basic-addon1">文件2</span> 147 <input type="file" id="file2" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> 148 </div> 149 <br /> 150 151 <div class="input-group"> 152 <span class="input-group-addon" id="basic-addon1">文件3</span> 153 <input type="file" id="file3" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> 154 </div> 155 <br /> 156 157 <!-- --> 158 <div class="progress"> 159 <div id="progressBar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"> 160 456456 161 </div> 162 </div> 163 164 165 <div class="col-md-12 text-center"> 166 <button id="upload" onclick="uploadFile();" class="btn btn-primary">上传</button> 167 168 <span id="output" style="font-size: 12px">等待</span> 169 170 <button id="reset" onclick="resetInpu()" class="btn btn-primary">重置</button> 171 172 </div> 173 174 <form class="form-horizontal"></form> 175 </div> 176 </div> 177 </div> 178 </div> 179 </body> 180 </html>
一般处理程序：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.IO; 6 7 namespace day1026.ASHX 8 { 9 /// <summary> 10 /// Add 的摘要说明 11 /// </summary> 12 public class Add : IHttpHandler 13 { 14 15 public void ProcessRequest(HttpContext context) 16 { 17 try 18 { 19 context.Response.ContentType = "multipart/form-data"; 20 //从Request中取参数，注意上传的文件在Requst.Files中 21 string name =context.Request["name"]; 22 int total = Convert.ToInt32(context.Request["total"]);//总共分了多少份 23 int index = Convert.ToInt32(context.Request["index"]);//当前第几份 24 var data = context.Request.Files["data"];//接收的文件 25 //保存一个分片到磁盘上 26 string dir = context.Request.MapPath("/File"); 27 string file = Path.Combine(dir, name + "_" + index); 28 data.SaveAs(file); 29 //如果已经是最后一个分片，组合 30 31 //接收每个分片时直接写到最终文件的相应位置上 32 if (index == total) 33 { 34 file = Path.Combine(dir, name); 35 byte[] bytes = null; 36 using (FileStream fs = new FileStream(file, FileMode.OpenOrCreate)) 37 { 38 for (int i = 1; i <= total; ++i) 39 { 40 string part = Path.Combine(dir, name + "_" + i); 41 bytes = System.IO.File.ReadAllBytes(part); 42 fs.Write(bytes, 0, bytes.Length); 43 bytes = null; 44 System.IO.File.Delete(part); 45 } 46 fs.Close(); 47 } 48 } 49 context.Response.Write("{"row":"" + true + ""}"); 50 // return true; 51 } 52 catch (Exception e) 53 { 54 context.Response.Write("{"row":"" + false + ""}"); 55 throw; 56 } 57 //返回是否成功，此处做了简化处理 58 //return Json(new { Error = 0 }); 59 } 60 61 public bool IsReusable 62 { 63 get 64 { 65 return false; 66 } 67 } 68 } 69 }