C#图片批量上传实例

之前写过一篇单图片上传的文章，但是有些时候图片批量上传使用的也是比较多的，所以再写一篇文章咯。这个案例包含CSS+JS+C#后端代码，CSS和JS是通用的，后端代码可以根据不同的语言可以写对应的方法，可能代码会有一些瑕疵，欢迎大神们进行纠正。

首先引入JS和CSS文件（评论留邮箱获取）

<link href="~/Scripts/ImgUpLoad/css/tinyImgUpload.css" rel="stylesheet" />
<script src="~/Scripts/ImgUpLoad/js/tinyImgUpload.js"></script>

然后放个div作为容器，然后准备一个button作为触发器

<div id="upload" class="col-sm-12"></div>

<button type="button" id="Add" class="btn btn-w-m btn-success">提交</button>

然后编写一段JS代码，这段代码建议放在body中间

<script>
                                    document.documentElement.style.fontSize = document.documentElement.clientWidth * 0.1 + 'px';
                                    var options = {
                                        path: '/ExamineWorkOrder/ImgUpLoader',//后端接收路径
                                        onSuccess: function (res) {
                                            //上传成功的回调，在这里处理业务
                                            GetCarsData();
                                            parent.layer.alert(res, {
                                                skin: 'layui-layer-molv'
                                            });
                                        },
                                        onFailure: function (res) {
                                            //上传失败的回调，在这里处理业务
                                            GetCarsData();
                                            parent.layer.alert(res, {
                                                skin: 'layui-layer-molv'
                                            });
                                        }
                                    }
                                    var upload = tinyImgUpload('#upload', options);
                                </script>

调用的时候直接调用upload方法即可

$("#Add").click(function(){
    upload();
});

到这时候前台就完成了，我是配合项目重写的样式，如果感觉样式不好看的话大家可以自己重写，下面祭上后端代码就OK了

        [HttpPost]
        public ActionResult ImgUpLoader()
        {
            if (!String.IsNullOrEmpty(Request.Files.AllKeys[0]))
            {
                string storageImgName = "";
                foreach (string upload in Request.Files.AllKeys)
                {
                        HttpPostedFileBase fileBase = Request.Files[upload];
                        string imgtype = fileBase.ContentType;
                        if (imgtype.Substring(0, 5) != "image")
                            return Content("error");
                        string webconfigImgUrl = WebConfigurationManager.AppSettings["ExamineWordOrderImgUrl"];//webconfig中配置的图片存放路径
                        string regroupUrl = DateTime.Now.ToString("yyyyMMddhhmmssfff") + fileBase.FileName.Substring(fileBase.FileName.Length - 4);
                        storageImgName += regroupUrl + ",";
                        fileBase.SaveAs(webconfigImgUrl + regroupUrl);
                }
                new ExamineWorkOrderService().UpdateExamineWordOrderImg(storageImgName, new Guid(Session["examineWordOrderId"].ToString()));
                return Content("提交成功！");
            }
            else
                return Content("提交成功，您未选择提交图片！");
        }

然后也顺便把取图片的方法也写上来吧

[HttpPost]
        public ActionResult GetExamineWorkImgs(Guid examineOrderId)
        {
            ExamineWorkOrderEntity examineWorkOrderEntitie   = new ExamineWorkOrderService().GetExaminePo(examineOrderId);
            string webconfigImgUrl = WebConfigurationManager.AppSettings["GetExamineWordOrderImgUrl"];
            if (examineWorkOrderEntitie.ExamineImg!=null)
            {
                string imgName = examineWorkOrderEntitie.ExamineImg;
                string[] examineImgs = imgName.Split(',');
                for (int i = 0; i < examineImgs.Length; i++)
                {
                    examineImgs[i] = webconfigImgUrl + examineImgs[i];
                }
                return SuccessResult(examineImgs);
            }
            return Content("未查询到图片！");
        }