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浏 ...
随机推荐
- 08 ListView 优化的例子
package com.fmy.homework; import java.util.List; import com.fmy.homework.httputil.HttpUtil; import c ...
- 卸载linux后出现grub rescue怎么办?
原文转自:http://zhidao.baidu.com/link?url=9e2mOttgV0IJDMml58SFbV-7XOvVzp2jR5l1n3ltFOzX1XAcp5-t-QQPc-Nozy ...
- Java项目案例:酒店前台客服管理系统
import java.util.Scanner; public class HelloWorld { public static void main(String[] args){ String [ ...
- 利用openssl管理证书及SSL编程第3部分:将MinGW编译的openssl dll导出def和lib供MSVC使用
将MinGW编译的openssl dll导出def和lib供MSVC使用 前面我们用mingw把openssl 编译成了动态库,得到下面2个dll文件: libeay32.dll ssleay32.d ...
- Linux中的端口占用问题
本文将会阐述两种解决端口占用的方法. 本文会用到的服务器端的程序如下: #include "unp.h" #include <time.h> int main(int ...
- ECMAScript 6 入门简介
ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级 ...
- 安卓TV开发(十) 智能电视开发之在线视频直播
转载注明出处:http://blog.csdn.net/sk719887916/article/details/46582987 从<安卓TV开发(八) 移动智能终端多媒体之在线加载网页视频源& ...
- 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) ...
- (四十三)UITabBarController和AppDelegate的一些细节
假设一个UITabBar是V1,V2,V3三个视图的根控制器. 一进入程序的时候,只会加载一个视图V1,也就是说UITabBar是延迟加载的. Tip:通过代码创建的UITabBar会一次性加载所有视 ...
- 17_Android中Broadcast详解(有序广播,无序广播)最终广播,Bundle传递参数,传递参数的时候指定权限
1 Broadcast是Android中的四大组件之一,他的用途很大,比如系统的一些广播:电量低.开机.锁屏等一些操作都会发送一个广播. 2 广播被分为两种不同的类型:"普通广播( ...