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

本篇将要和朋友们分享的是几个上传文件的例子和逻辑步奏及自定义个简单的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主要代码：

<fieldset>
 <legend>示例A - 普通表单上传文件，Request.Files获取上传文件</legend>
 <form action="/Error/A" method="post" enctype="multipart/form-data">
 <input type="file" name="fileA" multiple />
 <button type="submit">提交</button>
 </form>
</fieldset>

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

• 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}<br/>", uploadPath);
 sbLog.AppendFormat("上传文件量:{0}<br/>", fileCount);
 for (int i = 0; i < fileCount; i++)
 {
 var file = Request.Files[i];
 if (file == null || string.IsNullOrEmpty(file.FileName)) { continue; }
 var fileName = file.FileName;
 var fileNewName = DateTime.Now.Ticks + fileName;
 sbLog.AppendFormat("第:{0}个文件名称：{1}新名称：{2}下载地址：<a href='{3}' target='_blank'>{2}</a><br/>", 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<HttpPostedFileBase>类型来当做Action的参数，试图部分我们使用HtmlHelper的BeginForm方法来生成form标签，具体代码如：

<fieldset>
 <legend>示例B - 普通表单上传文件，HttpPostedFileBase获取上传文件</legend>
 @using (Html.BeginForm("B", "Error", FormMethod.Post, new { enctype = "multipart/form-data" }))
 {
 <input type="file" name="files" multiple />
 <button>提交</button>
 }
</fieldset>

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

[HttpPost]
 public ActionResult B(IEnumerable<HttpPostedFileBase> 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}<br/>", uploadPath);
 sbLog.AppendFormat("上传文件量:{0}<br/>", 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}下载地址：<a href='{3}' target='_blank'>{2}</a><br/>", 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代码：

<fieldset>
 <legend>示例C - ajax+FormData上传文件，Request.Files获取上传文件</legend>
 @using (Html.BeginForm("C", "Erro