C# MVC ajax实现多张图片上传

html代码如下：

<script src="~/Scripts/ajaxupload/ajaxfileupload.js"></script>
<div>
        <div>
            图片汇报:
        </div>
        <div>
            <input style="display:initial;" type="file" alt="插入图片" id="uploadImage" onchange="ajaxFileUpload()" name="uploadImage" />
            <span id="appendContent">
            </span>
        </div>
</div>

js代码如下：

<script>
 //文件上传
    function ajaxFileUpload() {
        //图片格式验证
        var x = document.getElementById("uploadImage");
        if (!x || !x.value) return;
        var patn = /\.jpg$|\.jpeg$|\.png$|\.gif$/i;
        if (!patn.test(x.value)) {
            alert("您选择的似乎不是图像文件。");
            x.value = "";
            return;
        }

        var elementIds = ["uploadImage"]; //flag为id、name属性名
        $.ajaxFileUpload({
            url: '/TaskManager/SaveImage',//上传的url，根据自己设置
            type: 'post',
            secureuri: false, //一般设置为false
            fileElementId: 'uploadImage', // 上传文件的id、name属性名
            dataType: 'text', //返回值类型，一般设置为json、application/json
            elementIds: elementIds, //传递参数到服务器
            success: function (data, status) {
                //alert(data);
                if (data == "Error1") {
                    alert("文件太大，请上传不大于5M的文件！");
                    return;
                } else if (data == "Error2") {
                    alert("上传失败，请重试！");
                    return;
                } else {
                    //这里为上传并做一下请求显示处理，返回的data是对应上传的文件名
                    $("#appendContent").append("<img  width='200' height='200' src='" + "../UploadFile/TaskReportImages/" + data + "' onclick='RemoveImg(this)'/>");

                }
            },
            error: function (data, status, e) {
                alert(e);
            }
        });
    }
    //删除图片
    function RemoveImg(obj) {
        $(obj).remove();
    }
</script>

Controller代码如下：

public class TaskManagerController : BaseController
    {

 /// <summary>
        /// 图片上传
        /// </summary>
        /// <returns></returns>
        public ActionResult SaveImage()
        {
            try
            {
                //判断上传文件的数目
                if (Request.Files.Count > 0)
                {
                    //获取文件
                    HttpPostedFileBase proImage = Request.Files["uploadImage"];//获取上传的图片

                    //判断上传文件大小，小于5M
                    if (proImage.ContentLength > 5 * 1024 * 1024)
                    {
                        return Content("Error1");
                    }

                    //截取图片类型：image/png
                    string[] filetypes = proImage.ContentType.Split('/');

                    //判断文件的类型
                    if (filetypes[1] == "jpg" || filetypes[1] == "gif" || filetypes[1] == "png" || filetypes[1] == "bmg" || filetypes[1] == "jpeg")
                    {
                        //给上传文件重命名
                        string filename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + Guid.NewGuid().ToString();
                        if (Directory.Exists(Server.MapPath("~/Uploadfile/TaskReportImages")) == false)//如果不存在就创建file文件夹
                        {
                            Directory.CreateDirectory(Server.MapPath("~/Uploadfile/TaskReportImages"));
                        }
                        //文件保存的路径
                        string filesavepath = Server.MapPath("~/Uploadfile/TaskReportImages/" + filename + "." + filetypes[1]);

                        //保存图片
                        proImage.SaveAs(filesavepath);

                        //返回文件名，可以在前台展示出来
                        return Content(filename + "." + filetypes[1]);
                    }
                    else
                    {
                        //图片格式不对
                        return Content("Error2");
                    }


                }
                else
                {    //上传图片数目小于或者等于0
                    return Content("Error1");
                }
            }
            catch
            {
                return Content("Error2");
            }


        }
}

至此一个简单的图片上传就完成了。