你的位置:首页 > ASP.net教程

[ASP.net教程]ASP.NET MVC上传文件的几种方法


1.Form表单提交

<p>Form提交</p><form action="@Url.Action("SavePictureByForm")" enctype="multipart/form-data" method="post">  <input id="pic" name="pic" type="file" />  <input type="submit" value="提交" /></form>

2.Ajax.BeginForm,原理也是Form表单提交

<p>Ajax.BeginForm</p>@using(Ajax.BeginForm("SavePictureByForm", null, new AjaxOptions() { OnSuccess = "PostSuc", OnFailure = "PostFail", HttpMethod = "Post"}, new {enctype = "multipart/form-data"})){  <input type="file" name="pic" id="pic" multiple="multiple" />  <input type="submit" value="提交" />}

以上两种方式,在后台用同一种方法可以获取数据: 但是这两种方法会造成页面刷新,有时会影响用户操作.

 public ActionResult SavePictureByForm()    {      HttpFileCollectionBase files = Request.Files;      var file = files[0];      bool isOk = false;      string msg = string.Empty;      //....OtherDO      return Content("<script>window.location.href='http://www.cnblogs.com//home/index';</script>");    }

3.Ajax提交  用此方法需要用到FileReader类,再获取到文件的Base64数据,将Base64数据Post过去

<p>Ajax:以上传图片为例</p><input type="file" id="picAjax"/><input type="button" id="submitPic" value="提交" /><img id="selImg" src="" alt="用作图片预览" />

  var picString = "";  $(function () {    $("#picAjax").change(function (e) {      var file = e.delegateTarget.files[0];      //在此可以对选择的文件进行判断:文件类型 文件大小等      //.....            var reader = new FileReader();      reader.readAsDataURL(file);      reader.onload = function (ret) {        picString = reader.result        //预览图片        $("#selImg").attr({ "src": picString });      }    });    $("#submitPic").click(function () {      $.ajax("home/SavePicture", {        type: "post",        datatype: "json",        data: picString,        error: function () { },        success: function (result) {          if (result) {            alert(result.msg);          }        }      });    });

后端接收

 [HttpPost]    public ActionResult SavePicture(string picString)    {      bool isOk = false;      string msg = string.Empty;      //其他操作      //.........      //.........      return Json(new { suc = isOk, msg = msg });    }

第三种方法做到了真正异步提交.但是如果选择的文件较大,可能会出现问题(未测试).

 

对于图片预览 前两种方法也可用base64数据进行图片预览.