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 = "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({ progressBarWidth }, 500).html(percent + "% "); 107 } 108 109 //修改精度条的长度显示当前删除到哪里 110 function updateProgress(percentage) { 111 $('.progress .progress-bar')[0].style = "" + 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 = "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; } } } }