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篇技术类文章。有的文章也有几百的阅读量,可评论留言的人却少之又少,点赞、推荐就更没有。如果这些文章确实帮到了你,对你的工作有那么一点点的用,希望路过的兄弟姐妹们可以有赞的点个赞,有推荐的来个推荐,有转载的来个转载,为我这个博客园增添点人气。
谢谢拉
谨以这篇博客鞭策自己。
IT轮子系列(四)——使用Jquery+formdata对象 上传 文件的更多相关文章
- 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- 通过jQuery Ajax使用FormData对象上传文件 (转载)
XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...
- [转] 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- HTML5 jQuery+FormData 异步上传文件,带进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...
- 利用formdata对象上传文件时,需要添加的参数
function doUpload() { var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: 'h ...
- FormData 对象上传二进制文件
使用jQuery 利用 FormData 上传文件:http://harttle.com/2016/07/04/jquery-file-upload.html 通过FormData对象可以组装 ...
- python中使用multipart/form-data请求上传文件
最近测试的接口是上传文件的接口,上传单个文件,我主要使用了2种方法~ 接口例如: URL: http://www.baidu.com/*** method:post 参数: { "salar ...
- 使用python或robotframework调multipart/form-data接口上传文件
这几天调一个multipart/form-data类型的接口,遇到点小阻碍.之前同事有使用urllib库写了个类似的方法实现,比较长,想要改的时候发现不太好使.在网上查找发现用requests库做这个 ...
- jQuery 关于IE9上传文件无法进入后台问题的原因及解决办法(ajaxfileupload.js第四弹)
第四弹的诞生完全不在自己最初的计划之中,是有个网友看了先前关于<ajaxfileupload.js系列>的文章后提出的问题,由于自己一直是用chrome浏览器去测试demo,完全忽略IE浏 ...
随机推荐
- [python] 带有参数并且传递参数的装饰器
场景时这样的,我有个一大堆任务,我要给这些任务计时,入库.就需要一个带有参数的装饰器来记录任务名称, 在任务执行前和执行之后都需要记录任务当时执行的时刻. #-*- encoding=utf-8 -* ...
- 最简单的基于DirectShow的示例:获取Filter信息
===================================================== 最简单的基于DirectShow的示例文章列表: 最简单的基于DirectShow的示例:视 ...
- UI设计--大象无形
UI设计,大象无形 UI设计,如同优雅的艺术品一样,优秀的UI设计也可以大象无形,大象无形的意思是有意化无意.大象化无形!就是不要显刻意,不要过分的主张,要兼容百态.无形态无框架才能容纳一切形体! ...
- Java并发——线程池原理
"池"技术对我们来说是非常熟悉的一个概念,它的引入是为了在某些场景下提高系统某些关键节点性能,最典型的例子就是数据库连接池,JDBC是一种服务供应接口(SPI),具体的数据库连接实 ...
- Hash存储机制 - HashMap原理 HashSet原理
HashMap 和 HashSet 是 Java Collection Framework 的两个重要成员,其中 HashMap 是 Map 接口的常用实现类,HashSet 是 Set 接口的常用实 ...
- 小试ImageMagik——开发篇
===================================================== ImageMagick的使用和开发的文章: 小试ImageMagik--使用篇 小试Imag ...
- 2015年iOS开发工程师前景分析
"互联网+"概念的提出催生了大量互联网企业,越来越多的传统行业需要与互联网更深地渗透与融合.而在这股互联网化的浪潮中,行业却发现找不到优秀的互联网人才. 互联网企业数量持续增长,用 ...
- Could not find property 'outputFile
* What went wrong: A problem occurred configuring project ':app'. > Could not find property 'outp ...
- UIViewController/ApplicationSequ…
UIViewController ApplicationSequence UI-03 注意: NSLog(@"%s %d",__FUNCTION__,__LINE__); // ...
- 一个优化极点的ViewHolder
代码中有注释: 使用方法: 1.可以在listview,gridview,stageView直接继承LazyAdapter使用 2.下面有Demo 代码 ViewHolder代码: import an ...