前言

在MVC 中文件的上传,一般都采用控件:

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

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

前台代码:

  1. <div>
  2. <form action="/FileUpload/UploadFile" method="post" enctype="multipart/form-data">
  3. <input type="file" name="file" /><br /><br />
  4. <input type="submit" value="提交" />
  5. </form>
  6. </div>

在前台界面,我们需要注意,当采用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. }

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

第二种方式:使用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().files[];
  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 == ) {
  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 =
  12. };
  13. return Json(obj);
  14. }

后端接收代码

后记

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

谢谢拉

谨以这篇博客鞭策自己。

IT轮子系列(四)——使用Jquery+formdata对象 上传 文件的更多相关文章

  1. 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  2. 通过jQuery Ajax使用FormData对象上传文件 (转载)

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...

  3. [转] 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  4. HTML5 jQuery+FormData 异步上传文件,带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...

  5. 利用formdata对象上传文件时,需要添加的参数

    function doUpload() { var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: 'h ...

  6. FormData 对象上传二进制文件

    使用jQuery 利用 FormData 上传文件:http://harttle.com/2016/07/04/jquery-file-upload.html     通过FormData对象可以组装 ...

  7. python中使用multipart/form-data请求上传文件

    最近测试的接口是上传文件的接口,上传单个文件,我主要使用了2种方法~ 接口例如: URL: http://www.baidu.com/*** method:post 参数: { "salar ...

  8. 使用python或robotframework调multipart/form-data接口上传文件

    这几天调一个multipart/form-data类型的接口,遇到点小阻碍.之前同事有使用urllib库写了个类似的方法实现,比较长,想要改的时候发现不太好使.在网上查找发现用requests库做这个 ...

  9. jQuery 关于IE9上传文件无法进入后台问题的原因及解决办法(ajaxfileupload.js第四弹)

    第四弹的诞生完全不在自己最初的计划之中,是有个网友看了先前关于<ajaxfileupload.js系列>的文章后提出的问题,由于自己一直是用chrome浏览器去测试demo,完全忽略IE浏 ...

随机推荐

  1. [python] 带有参数并且传递参数的装饰器

    场景时这样的,我有个一大堆任务,我要给这些任务计时,入库.就需要一个带有参数的装饰器来记录任务名称, 在任务执行前和执行之后都需要记录任务当时执行的时刻. #-*- encoding=utf-8 -* ...

  2. 最简单的基于DirectShow的示例:获取Filter信息

    ===================================================== 最简单的基于DirectShow的示例文章列表: 最简单的基于DirectShow的示例:视 ...

  3. UI设计--大象无形

      UI设计,大象无形 UI设计,如同优雅的艺术品一样,优秀的UI设计也可以大象无形,大象无形的意思是有意化无意.大象化无形!就是不要显刻意,不要过分的主张,要兼容百态.无形态无框架才能容纳一切形体! ...

  4. Java并发——线程池原理

    "池"技术对我们来说是非常熟悉的一个概念,它的引入是为了在某些场景下提高系统某些关键节点性能,最典型的例子就是数据库连接池,JDBC是一种服务供应接口(SPI),具体的数据库连接实 ...

  5. Hash存储机制 - HashMap原理 HashSet原理

    HashMap 和 HashSet 是 Java Collection Framework 的两个重要成员,其中 HashMap 是 Map 接口的常用实现类,HashSet 是 Set 接口的常用实 ...

  6. 小试ImageMagik——开发篇

    ===================================================== ImageMagick的使用和开发的文章: 小试ImageMagik--使用篇 小试Imag ...

  7. 2015年iOS开发工程师前景分析

    "互联网+"概念的提出催生了大量互联网企业,越来越多的传统行业需要与互联网更深地渗透与融合.而在这股互联网化的浪潮中,行业却发现找不到优秀的互联网人才. 互联网企业数量持续增长,用 ...

  8. Could not find property 'outputFile

    * What went wrong: A problem occurred configuring project ':app'. > Could not find property 'outp ...

  9. UIViewController/ApplicationSequ…

    UIViewController   ApplicationSequence UI-03 注意: NSLog(@"%s %d",__FUNCTION__,__LINE__); // ...

  10. 一个优化极点的ViewHolder

    代码中有注释: 使用方法: 1.可以在listview,gridview,stageView直接继承LazyAdapter使用 2.下面有Demo 代码 ViewHolder代码: import an ...