.NET MVC实现多图片上传并附带参数（ajaxfileupload）

    做网站呢，都免不了要做图片上传。

    还记得去年做微信的时候用WebAPI+ajaxfileupload.js做了一个能够附带参数上传的功能，博文地址：.NET WebAPI 实现图片上传（包括附带参数上传图片）

    这段时间在做一个网站，用的MVC5.0，有一个上传多张图片的需求...刚开始用的flash插件，这不前两天Google发文说chrome浏览器即将把HTML5作为默认设置了，flash只是对固定的几个大网站做默认了...啊哦，leader这不就顺带给咱找了点事做“把flash插件干掉，弄一个HTML5的”...

    呵呵~~

    也不知道leader到底知不知道啥叫HTML5，谁叫人是leader呢。

    那咱就做呗？！！！

    经过一天的奋战，最终效果如下：

    好吧，样式是自己写的，low了点...将就着看。

    废话不多说，直接上代码：

1.先来看看MVC的action。博主的网站有文件服务器，走的内网共享，要是直接存本地相信大家都会...

这里博主只是简单限制了单个文件大小，咱们可以在config里面限制一下整个大小，或者限制一下单次提交图片个数什么的....

        /// <summary>
        /// 图片上传  [FromBody]string type
        /// 单个图片最大支持200KB
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public JsonResult ImgUpload()
        {
            var result = new List<ImgUploadResult>();

            // 定义允许上传的文件扩展名 
            const string fileTypes = "gif,jpg,jpeg,png,bmp";
            // 最大文件大小(200KB)
            const int maxSize = 205000;
            // 获取附带POST参数值
            var type = Request["type"];

            // 设置上传目录 
            var imgPath = "";
            switch (type)
            {
                case "file":
                    imgPath = ConfigurationManager.AppSettings["HouseImgPath"];
                    break;
                case "video":
                    imgPath = ConfigurationManager.AppSettings["HouseVideoPath"];
                    break;
                case "information":
                    imgPath = ConfigurationManager.AppSettings["InformationPath"];
                    break;
            }
            // 存储文件服务器IP(内网)
            string fileComputerIP = ConfigurationManager.AppSettings["FileComputerIP"];


            for (var fileId = 0; fileId < Request.Files.Count; fileId++)
            {
                var curFile = Request.Files[fileId];
                if (curFile.ContentLength < 1) {continue;}
                else if (curFile.ContentLength > maxSize)
                {
                    return this.JsonFormatError("上传文件中有图片大小超出200KB!");
                }
                var fileExt = Path.GetExtension(curFile.FileName);
                if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)
                {
                    return this.JsonFormatError("上传文件中包含不支持文件格式!");
                }
                else
                {
                    // 存储文件名
                    string fullFileName = type + "_" + DateTime.Now.ToString("yyyyMMddhhmmssff") + CreateRandomCode(8) + fileExt;

                    // 存储路径（绝对路径）
                    string virtualPath = string.Format(@"\{0}{1}{2}", fileComputerIP, imgPath, fullFileName);

                    try
                    {
                        curFile.SaveAs(virtualPath);
                        // 文件服务器端口号IP
                        string fileComputerIPPort = ConfigurationManager.AppSettings["FileComputerIPNumber"];
                        result.Add(new ImgUploadResult()
                        {
                            FullFileName = fullFileName,
                            ImgUrl = string.Format(@"http://{0}/{1}/{2}", (fileComputerIP + ":" + fileComputerIPPort), imgPath, fullFileName)
                        });
                    }
                    catch (Exception exception)
                    {
                        throw new Exception("上传失败!", exception);
                    }
                }
            }
            return this.JsonFormatSuccess(result);
        }

        /// <summary>
        /// 生成指定长度的随机码。
        /// </summary>
        private string CreateRandomCode(int length)
        {
            string[] codes = new string[36] { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z" };
            StringBuilder randomCode = new StringBuilder();
            Random rand = new Random();
            for (int i = 0; i < length; i++)
            {
                randomCode.Append(codes[rand.Next(codes.Length)]);
            }
            return randomCode.ToString();
        }

2.再来看看前端代码，ajaxfileupload.js依然是用的我以前改过的一个版本，下载地址：支持附带参数提交的ajaxfileupload.js文件

3.自己写的一个imgupload的js包，没有做成jQuery扩展，简单的做了一个包，暴露了几个接口，方便调用。有兴趣的可以做成jQuery扩展

/// -------------------------
/// 图片文件上传
/// -------------------------

var imgFileUpload = (function () {

    var $This = [];
    var ImgType = "";
    var URL = "";

    // 构造方法
    function imgFileUpload($this, imgType, url) {
        $This = $this;
        ImgType = imgType;
        URL = url;

        _bindUploadEvent();
    };

    // 注册上传控件事件
    function _bindUploadEvent() {

        $.each($This, function (i, item) {
            $(item).find("i.button").click(function () {
                $(item).find("input").click();
            });
        });
    }

    // 上传文件控件change
    var fileUploadChange = function (fileControl) {

        var file = fileControl.files[0];

        var reader = new FileReader();
        reader.onload = function (evt) {
            var $par = $(fileControl).parent();
            // 执行上传
            _uploadImage($par);
        }
        reader.readAsDataURL(file);
    }

    // 上传文件
    function _uploadImage($box) {
        var files = $box.find("[type=file]");

        $(files).each(function (index, item) {
            if (item.files.length) {
                $.ajaxFileUpload({
                    url: URL,
                    secureuri: false,
                    fileUpload: item,
                    dataType: 'json',
                    data: { "type": ImgType },
                    success: function (data, status) {

                        var str = $(data).text();
                        var result = JSON.parse(str);
                        if (result.Code == 0) {
                            var html = "";
                            $.each(result.Data, function (i, dat) {
                                html += "<i class="list"><img src="" + dat.ImgUrl + "" sname="" + dat.FullFileName + "" /><i onclick="imgFileUpload.deletedImg(this)">删除</i></i>";
                            });
                            $box.find("div.imgShow").append(html);
                        } else {
                            alert(result.Message);
                        }
                    },
                    error: function (data, status, e) {
                        alert("上传失败！");
                    }
                });
            }
        });
    }

    // 图片删除事件
    function imgDeleted($i) {
        $($i).parent().remove();
    }

    // 获取已上传图片名称组合串
    function getImgNameStr() {
        debugger
        var result = "";

        var $img = $("div.houseImgUpload i.list img");
        $.each($img, function (i, item) {
            if (i == $img.length - 1) {
                result += $(item).attr("sname");
            } else {
                result += $(item).attr("sname") + ",";
            }
        });

        return result;
    }


    return {
        init: function ($this, imgType, url) {
            imgFileUpload($this, imgType, url);
        },
        fileUploadChange: function ($controller) {
            fileUploadChange($controller);
        },
        deletedImg: function ($i) {
            imgDeleted($i);
        },
        getImgNameStr: function () {
            return getImgNameStr();
        }
    };

})();

具体代码，应该都能看懂了... init是初始化方法，页面加载完成时调用一下：

$(document).ready(function () {
        imgFileUpload.init([$(".houseImgUpload")], "file", "/Common/ImgUpload/");
    });

其中$(".houseImgUpload")是整个上传控件的外部DIV：

<div class="right houseImgUpload">
   <i class="button">点击上传图片</i><i class="prompt">（单个文件大小不能超过200KB）</i>
   <input class="file-input" type="file" name="file" multiple="true" accept="image/*" onchange="imgFileUpload.fileUploadChange(this);"/>
   <div class="imgShow">
   </div>
</div>

OK，一看就明白，input[type=file]是隐藏的，点击button的时候触发input[type=file]的点击事件，详见第3点的21-30行。

  ---  得说一句： multiple="true" 是开启多文件上传，这个并不能兼容所有浏览器。

最后还差一个css的样式

/*
    多文件上传 样式表
*/

.houseImgUpload {
    width: 600px;
    float: left;
}

    .houseImgUpload i.button {
        height: 30px;
        width: 220px;
        background-color: #ff4400;
        color: #ffffff;
        display: block;
        line-height: 30px;
        font-size: 14px;
        text-align: center;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -webkit-border-radius: 3px;
        cursor: pointer;
        float: left;
    }

    .houseImgUpload i.prompt {
        height: 30px;
        line-height: 30px;
        float: left;
    }

    .houseImgUpload input.file-input {
        display: none;
    }

    .houseImgUpload div.imgShow {
        height: auto;
        width: 100%;
        margin-top: 32px;
    }

        .houseImgUpload div.imgShow i.list {
            float: left;
            position: relative;
            width: 100px;
            height: 120px;
            display: block;
            margin-left: 10px;
            margin-top: 10px;
        }

            .houseImgUpload div.imgShow i.list img {
                width: 100px;
                height: 100px;
            }

            .houseImgUpload div.imgShow i.list i {
                position: absolute;
                top: 102px;
                left: 30px;
                cursor: pointer;
            }

    OK，以上就是这次一个多文件上传的小控件的全部代码了。

    没有仔细的讲一些代码，是因为觉得都是些常规的代码，没有什么特别有含量的...所以，直接贴代码了。

整理成了一个包，放在csdn了，地址：

 MVC+ajaxfileupload实现多图片同时上传

    原创文章，代码都是从自己项目里贴出来的。转载请注明出处哦，亲~~~