一般处理程序多图片上传（可以更多） 

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

 

posted @ 2017-10-26 13:08  这座城市那么空  阅读(683)  评论(0)    收藏  举报