IT轮子系列（四）——使用Jquery+formdata对象 上传 文件

前言

在MVC 中文件的上传，一般都采用控件：

 <h2>IT轮子四——文件上传</h2>
 <div>
     <input type="file" />
 </div>

第一种方式：使用form表单上传

前台代码：

<div>
    <form action="/FileUpload/UploadFile" method="post" enctype="multipart/form-data">
        <input type="file" name="file" /><br /><br />
        <input type="submit" value="提交" />
    </form>
</div>

在前台界面，我们需要注意，当采用form提交数据的时候，我们页面中的控件必须要有name属性。否则，后台接收不到数据。

后台代码：

 [HttpPost]
         public ActionResult UploadFile() {
             try
             {
                 var files = Request.Files;
                 foreach (string item in files)
                 {
                     //可上传多个文件
                     var file = files[item];
                     var fileName = file.FileName;
                     var filePath = Server.MapPath(string.Format("~/{0}", "File"));
                     //判断路径是否存在
                     if (!Directory.Exists(filePath))
                     {
                         //创建路径
                         Directory.CreateDirectory(filePath);
                     }
                     //保存文件
                     file.SaveAs(Path.Combine(filePath, fileName));
                 }
             }
             catch (Exception ex)
             {
                 throw;
             }
             return View("Index");
         }

好拉，这样就文件就保存到指定的目录拉。

第二种方式：使用Jquery+formdata对象

formdata对象上传文件，其实也上form表单的另一种方式。只是通过juqery进行提交而不是form默认的action。

 <h2 style="color:burlywood">第二种方式：使用Jquery+formdata对象</h2>
 <div>
     <input type="file" name="file" /><br />
     <input type="button" value="提交" id="btnUpload" />
 </div>
 <script>
     $(document).ready(function () {
         //给按钮绑定点击事件
         $("#btnUpload").on("click", function () {
             //声明formdata对象
             var formData = new FormData();
             //获取上传文件
             var files = $("input[name='file']").get().files[];
             formData.append("myFile", files);
             //这里也可以添加其他参数
             formData.append("Name", "Peter");
             //通过ajax上传
             $.ajax({
                 url: '/Home/Upload/',
                 data: formData,
                 type: 'post',
                 contentType: false,//这里必须为false
                 processData: false,//这里必须为false
                 success: function (obj) {
                     if (obj.success == ) {
                         //根据返回json的对象做出提示
                         alert("上传成功");
                     }
                 }
             });
         })
     })
 </script>

前端视图

        public ActionResult Upload()
         {
             //这里的files 和form 都可按第一种上传方式处理、解析上传的文件和数据
             var files = Request.Files;
             var form = Request.Form;
             //do something here
 
             //return the josn object
             var obj = new
             {
                 success =
             };
             return Json(obj);
         }

后端接收代码

后记

从10月初，确切的说9月29号起，也写了7、8篇技术类文章。有的文章也有几百的阅读量，可评论留言的人却少之又少，点赞、推荐就更没有。如果这些文章确实帮到了你，对你的工作有那么一点点的用，希望路过的兄弟姐妹们可以有赞的点个赞，有推荐的来个推荐，有转载的来个转载,为我这个博客园增添点人气。

谢谢拉

谨以这篇博客鞭策自己。