最终我这个Action返回的是ContentResult,因为我想在页面输入一些信息好截图哈哈,好了咋们通过复制上面的代码运行起来点"提交"按钮得到的效果如图:
文件夹中选择上的两张图片,就是我们页面上传上来的,通过点击Action返回给页面的下载地址,我们可以在浏览器中浏览图片;好这个上传图片,浏览图片的过程描述大概就是这样,朋友们有收获一些么
. 示例B - 普通表单上传文件,HttpPostedFileBase获取上传文件
经过示例A描述的上传,下载图片流程应该都很清楚了,这个小节主要是换了一种获取上传文件信息的方式,我们通过HttpPostedFileBase获取(其实示例ARequest.Files的最底层就是这个),因为可能上传多个文件所以使用了IEnumerable<HttpPostedFileBase>类型来当做Action的参数,试图部分我们使用HtmlHelper的BeginForm方法来生成form标签,具体代码如:
<fieldset> <legend>示例B - 普通表单上传文件,HttpPostedFileBase获取上传文件</legend> @using (Html.BeginForm("B", "Error", FormMethod.Post, new { enctype = "multipart/form-data" })) { <input type="file" multiple /> <button>提交</button> } </fieldset>
这里使用@html.BeginForm写法主要是满足使用mvc的同学,简单说下这里使用的BeginForm参数:BeginForm(Action,Controller,表单提交方式,增加form属性enctype);好再来看下Controller的代码如:
[HttpPost] public ActionResult B(IEnumerable<HttpPostedFileBase> files) { var sbLog = new StringBuilder(string.Empty); var fileCount = files == null ? 0 : files.Count(); //访问上传文件地址 var path = @"http://localhost:1010/{0}"; //保存文件地址 var uploadPath = @"D:\D\TTest"; sbLog.AppendFormat("上传文件目录:{0}<br/>", uploadPath); sbLog.AppendFormat("上传文件量:{0}<br/>", fileCount); var i = 0; foreach (var file in files) { if (file == null || string.IsNullOrEmpty(file.FileName)) { continue; } var fileName = file.FileName; var fileNewName = DateTime.Now.Ticks + fileName; sbLog.AppendFormat("第:{0}个文件名称:{1}新名称:{2}下载地址:<a href='https://www.jb51.net/article/{3}' target='_blank'>{2}</a><br/>", i + 1, fileName, fileNewName, string.Format(path, fileNewName)); file.SaveAs(Path.Combine(uploadPath, fileNewName)); } return Content(sbLog.ToString()); }
上面的代码与示例A对比一下,可以看出处理方式几乎是一模一样呢,那这里就没什么说的了,主要是展示下两种获取file文件信息的方式,但下面的将与众不同
. 示例C - ajax+FormData上传文件,Request.Files获取上传文件
首先,来了解下FormData这个近几年才被几乎所有浏览器支持的js对象,它的构造函数:new FormData (form? : HTMLFormElement),后面的?号和C#参数差不多表示参数非必须,FormData的最大优点就是可以异步上传一个二进制文件,好吧这个神奇了;继续来将示例C,通常我们提交一般的文字信息直接通过jquery的ajax,post,get等几个方法就能传递到后台,这些直接传参方式无法吧file信息传递给后台,但用到FormData我们就可以用ajax把file文件信息传递给后台,这样我们也可以有更好的无刷新效果的上传文件了,先来看下前端html代码和js代码:
<fieldset> <legend>示例C - ajax+FormData上传文件,Request.Files获取上传文件</legend> @using (Html.BeginForm("C", "Error", FormMethod.Post, new { enctype = "multipart/form-data", @id = "form_c" })) { <span>账号:</span><input type="text" value="神牛步行3" /><br /> <span>密码:</span><input type="password" value="神牛" /><br /> <span>文件:</span><input type="file" multiple /><br /> <button type="button">提交</button><br /> <span></span> } </fieldset>
<script> $(function () { //示例C代码 $("#form_c button[type='button']").click(function () { var msg = $("#msg_c"); var btnSave = $(this); var formData = new FormData(document.getElementById("form_c")); console.log(formData); $.ajax({ url: '/Error/C', type: 'post', beforeSend: function (e) { btnSave.attr("disabled", "disabled"); msg.html("上传中..."); }, success: function (data) { console.log(data); var alertMsg = "上传失败"; if (data) { alertMsg = data.Status == 1 ? data.Data : alertMsg; } msg.html(alertMsg); btnSave.removeAttr("disabled"); }, error: function (data) { msg.html("上传失败"); btnSave.removeAttr("disabled"); }, data: formData, cache: false, contentType: false, processData: false }); }); }) </script>