ASP.NET MVC上传文件的几种方法

1.Form表单提交

1 2 3 4 5

<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表单提交

1 2 3 4 5 6

<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="提交" /> }

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

1 2 3 4 5 6 7 8 9 10 11

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='/home/index';</script>");        }

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

1 2 3 4

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

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

后端接收

1 2 3 4 5 6 7 8 9 10

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

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

 

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