Mvc之Ajax上传图片

MyAjaxForm下载地址,点击此处下载

视图部分:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
<form id="fm1" method="post">
    <input type="file" id="btnfile" name="btnfile" value="提交" />
    <input type="button" id="btn"  value="上传" />
</form>
<div id="divimg"></div>
@section scripts{
<script src="/scripts/MyAjaxForm.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
           // alert("ok2");
            $("#fm1").ajaxSubmit({
                url: '@Url.Action("Uploadfile")',
                type: 'post',
                success: function (data) {
                    data = data.replace('<PRE>', '').replace('</PRE>', '');
                    $('#divimg').append('<img src="' + data + '" width="200px"  height="200px" />');
                    var file = $('#btnfile');
                    file.after(file.clone().val(''));
                    file.remove();
                }
            });
        });
    });
</script>
}

  后台控制器部分

   public ActionResult Uploadfile() 
        {
            //上传文件
            HttpPostedFileBase img = Request.Files["btnfile"];
            string s = img.FileName;
            string fileExtension = Path.GetExtension(s);
            string path = "/Temp/"  ;
            if (Directory.Exists(Server.MapPath(path)) == false)//如果不存在就创建file文件夹
            {
                Directory.CreateDirectory(Server.MapPath(path));
            }
            string virpath = path + Guid.NewGuid() + fileExtension ;

            img.SaveAs(Server.MapPath(virpath));
            return Content(virpath);
        }

  

原文地址:https://www.cnblogs.com/bubugao/p/MyAjaxForm.html