Ajaxfileupload上传多张图片

Ajaxfileupload上传图片

第一步：引用ajaxfileupload.js插件

eg:<script src="~/ajaxfileupload.js"></script>

第二步：在页面上调用ajaxfileupload中ajaxFileUpload方法

eg:

<script type="text/javascript">

    $(function () {
       
        $("#Add").click(function () {
            //传值到后台
            $.ajaxFileUpload({
                url: '/Home/Indexadd',
                fileElementId: 'img',
                dataType:'json',
                //data: str,//需要传的参数
                success: function (result) {
                    if (result.Code==1) {
                        alert(result.Mes);
                    }
                    if (result.Code == 2) {
                        alert(result.Mes);
                    }
                    else {
                        alert(result.Mes);
                    }              

                }
            });
        });   
    });
</script>

第三步：在后台写方法

eg:

 public ActionResult Indexadd()
        {
            if (Request.Files.Count > 0)
            {
                for (int i = 0; i < Request.Files.Count; i++)
                {
                    string filename = Request.Files[i].FileName;
                    string guid = Guid.NewGuid().ToString();
                    Request.Files[i].SaveAs(Server.MapPath("~/img/") + guid + filename);
                }
                return Json(new { Code = 1, Mes = "添加成功" }, JsonRequestBehavior.AllowGet);
            }
            else
            {
                return Json(new { Code = 2, Mes = "添加失败" }, JsonRequestBehavior.AllowGet);
            }        
        }

第四步:html页面编辑

eg:

<div class="btn">
    <span>添加图片</span>
    <input id="fileupload" type="file" name="file">
</div>