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

来源:转载

前言

在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 }

后端接收代码

 

后记

在手敲代码,写这篇博客的时候,突然发现,过去原以为自己懂的文件上传,现在才发现只是自己以为而已;但在实际手敲代码的时候才发现自己遗漏了很多知识点,有不明所以的地方,比如表单上传需要name属性。在查看其他博友的文章才知道这个知识点。

这就是犯了一个毛病:眼高手低。

 

谨以这篇博客鞭策自己。

 

分享给朋友:
您可能感兴趣的文章:
随机阅读: