IT轮子系列（四）——使用Jquery+formdata对象 …

2018-06-22 06:17:07来源：未知阅读 ()

前言

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

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

View Code

第一种方式：使用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>

View Code

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

后台代码：

 1 [HttpPost]
 2         public ActionResult UploadFile() {
 3             try
 4             {
 5                 var files = Request.Files;
 6                 foreach (string item in files)
 7                 {
 8                     //可上传多个文件
 9                     var file = files[item];
10                     var fileName = file.FileName;
11                     var filePath = Server.MapPath(string.Format("~/{0}", "File"));
12                     //判断路径是否存在
13                     if (!Directory.Exists(filePath))
14                     {
15                         //创建路径
16                         Directory.CreateDirectory(filePath);
17                     }
18                     //保存文件
19                     file.SaveAs(Path.Combine(filePath, fileName));
20                 }
21             }
22             catch (Exception ex)
23             {                
24                 throw;
25             }
26             return View("Index");
27         }

View Code

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

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

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

 1 <h2 style="color:burlywood">第二种方式：使用Jquery+formdata对象</h2>
 2 <div>
 3     <input type="file" name="file" /><br />
 4     <input type="button" value="提交" id="btnUpload" />
 5 </div>
 6 <script>
 7     $(document).ready(function () {
 8         //给按钮绑定点击事件
 9         $("#btnUpload").on("click", function () {
10             //声明formdata对象
11             var formData = new FormData();
12             //获取上传文件
13             var files = $("input[name='file']").get(0).files[0];
14             formData.append("myFile", files);
15             //这里也可以添加其他参数
16             formData.append("Name", "Peter");
17             //通过ajax上传
18             $.ajax({
19                 url: '/Home/Upload/',
20                 data: formData,
21                 type: 'post',
22                 contentType: false,//这里必须为false
23                 processData: false,//这里必须为false
24                 success: function (obj) {
25                     if (obj.success == 1) {
26                         //根据返回json的对象做出提示
27                         alert("上传成功");
28                     }
29                 }
30             });
31         })
32     })
33 </script>

前端视图

 1        public ActionResult Upload()
 2         {
 3             //这里的files 和form 都可按第一种上传方式处理、解析上传的文件和数据
 4             var files = Request.Files;
 5             var form = Request.Form;
 6             //do something here
 7 
 8             //return the josn object
 9             var obj = new
10             {
11                 success = 1
12             };
13             return Json(obj);
14         }