一般处理程序多图片上传

来源：互联网发布：mac上看美剧的软件编辑：程序博客网时间：2024/04/30 20:38
 try            {                context.Response.ContentType = "multipart/form-data";                //从Request中取参数，注意上传的文件在Requst.Files中                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();                    }                }                context.Response.Write("{\"row\":\"" + true + "\"}");               // return true;            }            catch (Exception e)            {                context.Response.Write("{\"row\":\"" + false + "\"}");                throw;            }            //返回是否成功，此处做了简化处理            //return Json(new { Error = 0 });

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="Scripts/jquery-1.10.2.js"></script> <script src="Scripts/bootstrap.min.js"></script> <link href="Scripts/bootstrap.min.css" rel="stylesheet" /> <style> .head { margin-top: 20px; } </style> <script> function uploadFile() { //获取所有的文件控件 var upfiles = $("input[type=file]"); //所有文件的分页数 var filesCountSum = 0; //设置进度条初始值为0 $('.progress .progress-bar')[0].style = "width:0%"; $("#progressBar")[0].innerText = "0%"; //移除提示框内容、清空文本 $("#alertBox").removeClass(); $("#alertBox").text(""); //设置上传、重置按钮为禁用状态 $("#upload").addClass("disabled"); $("#reset").addClass("disabled"); if (upfiles[0].files[0] == undefined || upfiles[1].files[0] == undefined || upfiles[2].files[0] == undefined) { $("#alertBox").addClass("alert alert-danger"); $("#alertBox").text("请上传3个文件"); $("#upload").removeClass("disabled"); $("#reset").removeClass("disabled"); } else { //计算所有的文件分片总数 upfiles.each(function () { size = $(this)[0].files[0].size; var shardSize = 2 * 1024 * 1024; //以2MB为一个分片 filesCountSum += Math.ceil(size / shardSize); //总片数 }) var succeed = 0; upfiles.each(function () { var file = $(this)[0].files[0], //文件对象 fileNum = $("#file")[0].files[0].length, name = file.name, //文件名 size = file.size; //总大小 //succeed =0; //记录成功的片数 var shardSize = 2 * 1024 * 1024, //以2MB为一个分片 shardCount = Math.ceil(size / shardSize); //总片数 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("total", shardCount); //总片数 form.append("index", i + 1); //当前是第几片 //Ajax提交 $.ajax({ url: "/ASHX/Add.ashx", type: "POST", data: form, async: true, //异步 processData: false, //很重要，告诉jquery不要对form进行处理 contentType: false, //很重要，指定为false才能形成正确的Content-Type success: function () { ++succeed; //显示上传了多少片 $("#output").text(succeed + " / " + filesCountSum); var percent = ((succeed / filesCountSum).toFixed(2)) * 100; updateProgress(percent); if (succeed == filesCountSum) { $("#upload").removeClass("disabled"); $("#reset").removeClass("disabled"); $("#alertBox").addClass("alert alert-success"); $("#alertBox").text("上传成功"); } }, error: function () { //如果失败则提示框显示 $("#alertBox").addClass("alert alert-danger"); $("#alertBox").text("上传失败"); } }); } }) } } //用来延时显示更好的效果 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')[0].style = "width:" + percentage + "%"; $("#progressBar")[0].innerText = percentage + "%"; } //重置 function resetInpu() { $("input").each(function () { $("#output").text("") //标签清空进度条为0 $(this).val(""); $('.progress .progress-bar')[0].style = "width:0%"; $("#progressBar")[0].innerText = "0%"; //移除提示框内容、清空文本 $("#alertBox").removeClass(); $("#alertBox").text(""); }) } </script></head><body> <div class="container head"> <div class="row"> <div class="panel panel-primary"> <div class="panel-heading">上传文件</div> <div class="panel-body"> <div class="" id="alertBox"></div> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">文件1</span> <input type="file" id="file" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> <br /> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">文件2</span> <input type="file" id="file2" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> <br /> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">文件3</span> <input type="file" id="file3" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> <br /> <!-- --> <div class="progress"> <div id="progressBar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"> 456456 </div> </div> <div class="col-md-12 text-center"> <button id="upload" onclick="uploadFile();" class="btn btn-primary">上传</button> <span id="output" style="font-size: 12px">等待</span> <button id="reset" onclick="resetInpu()" class="btn btn-primary">重置</button> </div> <form class="form-horizontal"></form> </div> </div> </div> </div></body></html>
阅读全文
0 0