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");
            }


        }
}

至此一個簡單的圖片上傳就完成了。