下面这段代码主要有几个特点:
1、Ajax提交表单
2、表单中有一个<input type="file"/>
3、当选择完图片后,利用AJAX提交表单,并在执行成功后返回图片路径,实现预览图片
<script type="text/javascript"> $(document).ready(function () { var form = $("#form1"); $("#file1").change(function () { $("#form1").ajaxSubmit({ success: function (msg) { alert(msg); $("#img1").attr("src", msg); } }); }); }); </script> <form id="form1" action="/Home/aa" method="post" enctype="multipart/form-data" > <input type="file" name="file" onchange="up()" id="file1" /> <img alt="img" id="img1" /> </form>
控制器代码:
//这里只是为了实现效果,没有进行任何验证和处理 public ContentResult aa() { HttpPostedFileBase file = Request.Files["file"]; string path = "/Content/"+ System.IO.Path.GetFileName(file.FileName); file.SaveAs(Path.Combine(Server.MapPath("~/Content"),Path.GetFileName(file.FileName))); return Content(path); }
代码狠简单,相信初学者很容易看懂。