前言

在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. 08 ListView 优化的例子

    package com.fmy.homework; import java.util.List; import com.fmy.homework.httputil.HttpUtil; import c ...

  2. 卸载linux后出现grub rescue怎么办?

    原文转自:http://zhidao.baidu.com/link?url=9e2mOttgV0IJDMml58SFbV-7XOvVzp2jR5l1n3ltFOzX1XAcp5-t-QQPc-Nozy ...

  3. Java项目案例:酒店前台客服管理系统

    import java.util.Scanner; public class HelloWorld { public static void main(String[] args){ String [ ...

  4. 利用openssl管理证书及SSL编程第3部分:将MinGW编译的openssl dll导出def和lib供MSVC使用

    将MinGW编译的openssl dll导出def和lib供MSVC使用 前面我们用mingw把openssl 编译成了动态库,得到下面2个dll文件: libeay32.dll ssleay32.d ...

  5. Linux中的端口占用问题

    本文将会阐述两种解决端口占用的方法. 本文会用到的服务器端的程序如下: #include "unp.h" #include <time.h> int main(int ...

  6. ECMAScript 6 入门简介

    ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级 ...

  7. 安卓TV开发(十) 智能电视开发之在线视频直播

    转载注明出处:http://blog.csdn.net/sk719887916/article/details/46582987 从<安卓TV开发(八) 移动智能终端多媒体之在线加载网页视频源& ...

  8. 4.5、Libgdx运行日志管理

    (原文:http://www.libgdx.cn/topic/47/4-5-libgdx%E8%BF%90%E8%A1%8C%E6%97%A5%E5%BF%97%E7%AE%A1%E7%90%86) ...

  9. (四十三)UITabBarController和AppDelegate的一些细节

    假设一个UITabBar是V1,V2,V3三个视图的根控制器. 一进入程序的时候,只会加载一个视图V1,也就是说UITabBar是延迟加载的. Tip:通过代码创建的UITabBar会一次性加载所有视 ...

  10. 17_Android中Broadcast详解(有序广播,无序广播)最终广播,Bundle传递参数,传递参数的时候指定权限

     1  Broadcast是Android中的四大组件之一,他的用途很大,比如系统的一些广播:电量低.开机.锁屏等一些操作都会发送一个广播. 2  广播被分为两种不同的类型:"普通广播( ...