热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

文件上传的几个示例分享【推荐】

本篇文章主要分享的是几个上传文件的例子和逻辑步奏及自定义个简单的js上传插件。具有很好的参考价值,需要的朋友一起来看下吧

本篇将要和朋友们分享的是几个上传文件的例子和逻辑步奏及自定义个简单的js上传插件我取名为shenniu.upfile-0.0.1.js;近来在讨论组中很有几个朋友咨询上传文件的代码和怎么下载上传的文件,所以写了此篇文章,希望能为朋友们解答一些疑惑或能带来帮助,也谢谢各位多多支持点赞。

以上是个人的看法,下面来正式分享今天的文章吧:

  • 使用iis发布保存上传文件的文件夹
  • 示例A - 普通表单上传文件,Request.Files获取上传文件
  • 示例B - 普通表单上传文件,HttpPostedFileBase获取上传文件
  • 示例C - ajax+FormData上传文件,Request.Files获取上传文件
  • 示例D - 自定义上传插件,Request.Files获取上传文件并提交表单内容

下面一步一个脚印的来分享:

. 使用iis发布保存上传文件的文件夹

首先,因为我们上传文件后,需要查看或者下载这个文件,通常分为两种形式;一种把上传的文件上传到程序的根目录中的某个文件夹中,这种就可以直接通过站点的虚拟路径来访问,这种其实也是使用了iis发布的;第二种是通过程序上传到服务器的某个磁盘中,这种路径通常就不在上传程序站点的目录下,因为想让用户通过其他的url地址访问下载文件,iis发布只是其中一种;其实用iss发布保存上传文件的文件夹和发布程序一样差不多;

我们随便找个某磁盘下面的文件夹当做保存上传文件的文件夹,我这里磁盘路径是:D:\D\TTest这个TTest文件夹,然后放几张测试的图片,并复制这个路径,在iis中创建一个站点物理路径指向刚才的复制的路径,端口我这里是1010,我这里没有域名只有用本机的ip代替,这里默认是localhost,配置好后,查看高级设置如:

然后点击"测试文件地址"这个站点-》内容视图 能看到如图的效果

然后,鼠标指上去右键其中某一张图片-》浏览 这样浏览器马上就能看到如图所示的效果:

这样就完成了iis发布文件夹,当然通过http访问图片只是多种方式的一种;有些后缀的文件可能访问不了,需要手动在iis中增加mime类型:

. 示例A - 普通表单上传文件,Request.Files获取上传文件

首先,我们来看下html主要代码:

示例A - 普通表单上传文件,Request.Files获取上传文件

看是简单简单及简短的代码,其实是上传的重要部分必不可少的,下面就来简单总结下:

  • form元素的action属性:表单提交地址,这里是文件上传的接口地址
  • 必须采用method="post"提交方式
  • 表单提交数据的格式是enctype="multipart/form-data"
  • type="file"元素必须要有属性name,这里例子是name="fileA"
  • type="file"元素的multiple属性可选,意思是可以选择多个上传文件不用再增加file标签元素来支持上传多个文件了,这个在近几年移动端火热的时候几乎所有最新版本浏览器都支持

再来,我们一起看下后端怎么接受表单提交过来的文件信息,先来看代码:

[HttpPost]
 public ActionResult A()
 {
 var sbLog = new StringBuilder(string.Empty);
 var fileCount = Request.Files.Count;
 //访问上传文件地址
 var path = @"http://localhost:1010/{0}";
 //保存文件地址
 var uploadPath = @"D:\D\TTest";
 sbLog.AppendFormat("上传文件目录:{0}
", uploadPath); sbLog.AppendFormat("上传文件量:{0}
", fileCount); for (int i = 0; i {2}
", i + 1, fileName, fileNewName, string.Format(path, fileNewName)); file.SaveAs(Path.Combine(uploadPath, fileNewName)); } return Content(sbLog.ToString()); }

这段代码的总要点列举如下:

  • Request.Files:用来获取上传的文件,所有上传文件都以此来获取,什么文件名称也包含在列表中
  • path变量:就是咋们在前面配置的iis发布文件夹的url路径,只需要传递上传的文件的名称就可以访问
  • uploadPath:保存文件地址
  • 通过for循环获取上传上来的文件信息和通过file.SaveAs保存到uploadPath指定的文件夹中去
  • Path.Combine方法把传递进来的参数拼接长一个磁盘路径如第一个参数值是D:/第二个参数是test.png那么这个方法返回的结果是D:/test.png

最终我这个Action返回的是ContentResult,因为我想在页面输入一些信息好截图哈哈,好了咋们通过复制上面的代码运行起来点"提交"按钮得到的效果如图:

文件夹中选择上的两张图片,就是我们页面上传上来的,通过点击Action返回给页面的下载地址,我们可以在浏览器中浏览图片;好这个上传图片,浏览图片的过程描述大概就是这样,朋友们有收获一些么

. 示例B - 普通表单上传文件,HttpPostedFileBase获取上传文件

经过示例A描述的上传,下载图片流程应该都很清楚了,这个小节主要是换了一种获取上传文件信息的方式,我们通过HttpPostedFileBase获取(其实示例ARequest.Files的最底层就是这个),因为可能上传多个文件所以使用了IEnumerable类型来当做Action的参数,试图部分我们使用HtmlHelper的BeginForm方法来生成form标签,具体代码如:

示例B - 普通表单上传文件,HttpPostedFileBase获取上传文件 @using (Html.BeginForm("B", "Error", FormMethod.Post, new { enctype = "multipart/form-data" })) { }

这里使用@html.BeginForm写法主要是满足使用mvc的同学,简单说下这里使用的BeginForm参数:BeginForm(Action,Controller,表单提交方式,增加form属性enctype);好再来看下Controller的代码如:

[HttpPost]
 public ActionResult B(IEnumerable files)
 {
 var sbLog = new StringBuilder(string.Empty);
 var fileCount = files == null ? 0 : files.Count();
 //访问上传文件地址
 var path = @"http://localhost:1010/{0}";
 //保存文件地址
 var uploadPath = @"D:\D\TTest";
 sbLog.AppendFormat("上传文件目录:{0}
", uploadPath); sbLog.AppendFormat("上传文件量:{0}
", fileCount); var i = 0; foreach (var file in files) { if (file == null || string.IsNullOrEmpty(file.FileName)) { continue; } var fileName = file.FileName; var fileNewName = DateTime.Now.Ticks + fileName; sbLog.AppendFormat("第:{0}个文件名称:{1}新名称:{2}下载地址:{2}
", i + 1, fileName, fileNewName, string.Format(path, fileNewName)); file.SaveAs(Path.Combine(uploadPath, fileNewName)); } return Content(sbLog.ToString()); }

上面的代码与示例A对比一下,可以看出处理方式几乎是一模一样呢,那这里就没什么说的了,主要是展示下两种获取file文件信息的方式,但下面的将与众不同

. 示例C - ajax+FormData上传文件,Request.Files获取上传文件

首先,来了解下FormData这个近几年才被几乎所有浏览器支持的js对象,它的构造函数:new FormData (form? : HTMLFormElement),后面的?号和C#参数差不多表示参数非必须,FormData的最大优点就是可以异步上传一个二进制文件,好吧这个神奇了;继续来将示例C,通常我们提交一般的文字信息直接通过jquery的ajax,post,get等几个方法就能传递到后台,这些直接传参方式无法吧file信息传递给后台,但用到FormData我们就可以用ajax把file文件信息传递给后台,这样我们也可以有更好的无刷新效果的上传文件了,先来看下前端html代码和js代码:

示例C - ajax+FormData上传文件,Request.Files获取上传文件 @using (Html.BeginForm("C", "Error", FormMethod.Post, new { enctype = "multipart/form-data", @id = "form_c" })) { 账号:
密码:
文件:

}

上面的html代码与示例B的格式差不多,只是增加了两个input元素方便我们来测试;重点在js代码中,由上面介绍可以看到FormData的构造只能是HTMLFormElement,所以我们通过document.getElementById("form_c")来获取这个表单的对象传递给它;

然后,我们用普通的$.ajax提交FormData对象到后台进行上传,至于后台我们参照示例A的方式来获取文件信息,不用做什么特殊额处理,只是我们返回的信息是Json数据,代码如:

[HttpPost]
 public JsonResult C()
 {
 Thread.Sleep(1000 * 5);
 var respOnse= new MoResponse();
 var sbLog = new StringBuilder("开始处理...");
 try
 {
 sbLog.AppendFormat("账号:{0}
", Request.Params["userName"]); sbLog.AppendFormat("密码:{0}
", Request.Params["userPwd"]); var fileCount = Request.Files.Count; //访问上传文件地址 var path = @"http://localhost:1010/{0}"; //保存文件地址 var uploadPath = @"D:\D\TTest"; sbLog.AppendFormat("上传文件目录:{0}
", uploadPath); sbLog.AppendFormat("上传文件量:{0}
", fileCount); for (int i = 0; i {2}
", i + 1, fileName, fileNewName, string.Format(path, fileNewName)); file.SaveAs(Path.Combine(uploadPath, fileNewName)); response.Status = 1; } } catch (Exception ex) { sbLog.AppendFormat("异常信息:{0}", ex.Message); } finally { response.Data = sbLog.ToString(); } return Json(response); }

下面我们看一下添加"提交"按钮执行后返回的效果,可以看出提交后没有跳转到action指向的路由,这样用户体验就好多了:

. 示例D - 自定义上传插件,Request.Files获取上传文件并提交表单内容

首先,我发个插件下载地址shenniu.upfile-0.0.1.js,只需要在试图或者html页面引用jquery-1.10.2.min.js库和这个插件,我们就可以这样使用:


使用插件的地方和js关键点已经通过代码注释备注好了,朋友们可仔细阅读下,这里要将的是插件上传文件和提交表单数据的逻辑;我们分析下:

  • form表单中通常有其他的属性数据
  • form表单的提交数据的后台地址可能和上传文件的后台地址不一样
  • 需要单独上传文件后,返回是否上传成功,再提交form表单的其他数据到后台

由上面几点插件的参数定义为:

var defOption = { url: "http://www.cnblogs.com/wangrudong003/", //上传路由地址,注:1.目前通过该地址上传文件成功后,返回的信息是text/plain 2.跨域暂未考虑
 fileEleName: "fileName",  //上传input file控件的唯一名称
 uid: new Date().getTime(),  //防重复
 backFun: function () { }  //回调函数
 };

  这个自定义插件原理和几个重点是:

  • 自动创建一个iframe(用来做无刷新体验),iframe里面创建一个form表单,form表单里面只包含要上传的文件file对象,最终把iframe加入到视图页面中
  • 通过iframe.load()方法来获取上传文件后返回到contentWindow.document.body中的信息,并且执行自定义回调函数,把参数传递给自定义方法方便使用者自由的控制体验效果
  • 创建的form表单里面只能使用页面选择文件上传的文件file对象,使用jquery的clone()函数无法获取到选择的文件对象(这是一个悲剧),所以我这个使用append把用户使用的那个file对象直接包含到创建的form中去,然后在创建一个初始化的file元素对象到原始的视图中去代替被移除掉的file元素,代码如(这个还真花了我2个小时的时间尝试):
//清空自定义form多余的file元素
 form.html("");
 var files = $("input[name='" + defOption.fileEleName + "']");
 //复制上传控件对象
 var filesClOne= files.clone(true);
 filesClone.insertAfter(files);
 form.append(files);
  • 使用该插件提交原始表单数据的顺序是:用户点击页面的保存按钮-》通过插件创建的上传文件的form表单,提交上传文件-》上传文件返回成功与否的信息-》收到上传成功新文件名称信息,创建个hidden保存新文件名称到原始form中去-》再真实提交原始form表单的其他数据

下面来看下效果图:

示例D的后台代码分为两部分:1.上传文件的Action 2.真实获取表单form参数的Action,代码如:

/// 
 /// 保存form提交的表单数据
 /// 
 /// 
 [HttpPost]
 public JsonResult D()
 {
 var respOnse= new MoResponse();
 var sbLog = new StringBuilder(string.Empty);
 try
 {
 //访问上传文件地址
 var path = @"http://localhost:1010/{0}";
 sbLog.AppendFormat("账号:{0}
", Request.Params["userName"]); sbLog.AppendFormat("密码:{0}
", Request.Params["userPwd"]); foreach (var item in Request.Params["hidFileNames"].Split(new char[] { '|' }, StringSplitOptions.RemoveEmptyEntries)) { sbLog.AppendFormat("文件新名称:{0};下载地址:{0}
", item, string.Format(path, item)); } response.Status = 1; } catch (Exception ex) { sbLog.AppendFormat("异常信息:{0}", ex.Message); } finally { response.Data = sbLog.ToString(); } return Json(response); } /// /// 获取上传文件信息 /// /// [HttpPost] public ContentResult D_A() { var respOnse= new MoResponse(); response.Data = "上传失败"; try { Thread.Sleep(1000 * 3); var fileCount = Request.Files.Count; //保存文件地址 var uploadPath = @"D:\D\TTest"; var fileNames = string.Empty; for (int i = 0; i

好了插件需要讲解的就这么多,不知不觉有只剩我一个人了,该回家了,下面给出整体的代码,插件代码请使用连接获取:

插件下载地址:shenniu.upfile-0.0.1.js

Controller代码:

public class ErrorController : Controller
 {
 //
 // GET: /Error/
 public ActionResult Index()
 {
 return View();
 }
 [HttpPost]
 public ActionResult A()
 {
 var sbLog = new StringBuilder(string.Empty);
 var fileCount = Request.Files.Count;
 //访问上传文件地址
 var path = @"http://localhost:1010/{0}";
 //保存文件地址
 var uploadPath = @"D:\D\TTest";
 sbLog.AppendFormat("上传文件目录:{0}
", uploadPath); sbLog.AppendFormat("上传文件量:{0}
", fileCount); for (int i = 0; i {2}
", i + 1, fileName, fileNewName, string.Format(path, fileNewName)); file.SaveAs(Path.Combine(uploadPath, fileNewName)); } return Content(sbLog.ToString()); } [HttpPost] public ActionResult B(IEnumerable files) { var sbLog = new StringBuilder(string.Empty); var fileCount = files == null ? 0 : files.Count(); //访问上传文件地址 var path = @"http://localhost:1010/{0}"; //保存文件地址 var uploadPath = @"D:\D\TTest"; sbLog.AppendFormat("上传文件目录:{0}
", uploadPath); sbLog.AppendFormat("上传文件量:{0}
", fileCount); var i = 0; foreach (var file in files) { if (file == null || string.IsNullOrEmpty(file.FileName)) { continue; } var fileName = file.FileName; var fileNewName = DateTime.Now.Ticks + fileName; sbLog.AppendFormat("第:{0}个文件名称:{1}新名称:{2}下载地址:{2}
", i + 1, fileName, fileNewName, string.Format(path, fileNewName)); file.SaveAs(Path.Combine(uploadPath, fileNewName)); } return Content(sbLog.ToString()); } [HttpPost] public JsonResult C() { Thread.Sleep(1000 * 5); var respOnse= new MoResponse(); var sbLog = new StringBuilder("开始处理..."); try { sbLog.AppendFormat("账号:{0}
", Request.Params["userName"]); sbLog.AppendFormat("密码:{0}
", Request.Params["userPwd"]); var fileCount = Request.Files.Count; //访问上传文件地址 var path = @"http://localhost:1010/{0}"; //保存文件地址 var uploadPath = @"D:\D\TTest"; sbLog.AppendFormat("上传文件目录:{0}
", uploadPath); sbLog.AppendFormat("上传文件量:{0}
", fileCount); for (int i = 0; i {2}
", i + 1, fileName, fileNewName, string.Format(path, fileNewName)); file.SaveAs(Path.Combine(uploadPath, fileNewName)); response.Status = 1; } } catch (Exception ex) { sbLog.AppendFormat("异常信息:{0}", ex.Message); } finally { response.Data = sbLog.ToString(); } return Json(response); } /// /// 保存form提交的表单数据 /// /// [HttpPost] public JsonResult D() { var respOnse= new MoResponse(); var sbLog = new StringBuilder(string.Empty); try { //访问上传文件地址 var path = @"http://localhost:1010/{0}"; sbLog.AppendFormat("账号:{0}
", Request.Params["userName"]); sbLog.AppendFormat("密码:{0}
", Request.Params["userPwd"]); foreach (var item in Request.Params["hidFileNames"].Split(new char[] { '|' }, StringSplitOptions.RemoveEmptyEntries)) { sbLog.AppendFormat("文件新名称:{0};下载地址:{0}
", item, string.Format(path, item)); } response.Status = 1; } catch (Exception ex) { sbLog.AppendFormat("异常信息:{0}", ex.Message); } finally { response.Data = sbLog.ToString(); } return Json(response); } /// /// 获取上传文件信息 /// /// [HttpPost] public ContentResult D_A() { var respOnse= new MoResponse(); response.Data = "上传失败"; try { Thread.Sleep(1000 * 3); var fileCount = Request.Files.Count; //保存文件地址 var uploadPath = @"D:\D\TTest"; var fileNames = string.Empty; for (int i = 0; i /// 0:失败 1:成功 /// public int Status { get; set; } }

View代码:

@{
 ViewBag.Title = "上传 - 示例";
}



 
 


 
示例A - 普通表单上传文件,Request.Files获取上传文件
示例B - 普通表单上传文件,HttpPostedFileBase获取上传文件 @using (Html.BeginForm("B", "Error", FormMethod.Post, new { enctype = "multipart/form-data" })) { }
示例C - ajax+FormData上传文件,Request.Files获取上传文件 @using (Html.BeginForm("C", "Error", FormMethod.Post, new { enctype = "multipart/form-data", @id = "form_c" })) { 账号:
密码:
文件:

}
示例D - 自定义上传插件,Request.Files获取上传文件并提交表单内容 @using (Html.BeginForm("D", "Error", FormMethod.Post, new { enctype = "multipart/form-data", @id = "form_d" })) { 账号:
密码:
文件:

}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!


推荐阅读
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 阿,里,云,物,联网,net,core,客户端,czgl,aliiotclient, ... [详细]
  • 在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ... [详细]
  • SpringMVC接收请求参数的方式总结
    本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
  • 本文介绍了一种处理AJAX操作授权过期的全局方式,以解决Asp.net MVC中Session过期异常的问题。同时还介绍了基于WebImage的图片上传工具类。详细内容请参考链接:https://www.cnblogs.com/starluck/p/8284949.html ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • jQuery如何判断一个元素是否被点击?
    本文介绍了使用jQuery判断一个元素是否被点击的方法,并通过示例进行了具体说明。注意要指定父级,否则会执行多次。 ... [详细]
author-avatar
mobiledu2502856013
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有