HTTP文件上传

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

看到网上很多链接文件（word、pdf...）可以下载，想制作http下载链接。

其实是将某文件直接放在服务器上搭建的网站上某目录下即可，例如：http://xxx:port/UpgradePack/525.jpg 或者 http://xxx:port//博客.pdf。

http服务器有很多种，如tomcat，apache，IIS等，也可以直接下载http服务器hfs（http file server）快速搭建。

一、利用C#模拟文件上传至服务器

主要有以下三种基本方法：

方法一：用Web控件FileUpload

上传到网站根目录，适用于asp.net webForm

<form id="form1" runat="server">
<%--上传文件大小有限制--%>
<asp:FileUpload ID="FileUpload1" AllowMultiple="true" runat="server" />
<br />
<br />
<%--直接进FileUploadTest.aspx.cs中处理--%>
<asp:Button ID="Button1" runat="server" Text="上传到服务器" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="" Style="color: Red"></asp:Label>
</form> protected void Button1_Click(object sender, EventArgs e)
{
//处理单个文件
//if(FileUpload1.HasFile)
//{
// FileUpload1.SaveAs(Server.MapPath("~/Files/") + FileUpload1.FileName);
// Label1.Text = "上传成功";
//}
//else
//{
// Label1.Text = "上传失败";
//} if (FileUpload1.HasFile)
{
foreach (var item in FileUpload1.PostedFiles)
{
FileUpload1.SaveAs(Server.MapPath("~/Files/") + item.FileName);
}
Label1.Text = "上传成功";
}
else
{
Label1.Text = "上传失败";
}
}

允许一次选择多个文件：AllowMultiple="true"

注意：FileUpLoad上传控件，限制文件上传大小默认4096kb（4MB）

如果我们要上传超过此大小的文件，会出现错误界面等……

如果想增大允许上传的文件大小，则需要修改web.config文件代码：

说明：

maxRequestLength属性限制文件上传的大小，是以KB为单位的，默认值为4096KB，而最大上限为2097151KB，大约是2GB。

executionTimeout属性限制文件上传的时间，以秒（s）为单位，默认值为90 s，如果您考虑到所设计的Web应用系统上传时间要超过90 s可延长设定值。

方法二：用Html控件HtmlInputFile

<form id="form1" runat="server">
<input type="file" id="file1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="上传" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="" Style="color: Red"></asp:Label>
</form> protected void Button1_Click(object sender, EventArgs e)
{
if (file1.PostedFile.ContentLength > )
{
file1.PostedFile.SaveAs(Server.MapPath("~/") + Path.GetFileName(file1.PostedFile.FileName));
Label1.Text = "上传成功！";
}
}

选择多个文件：multiple="multiple" ，但是发现后端没有获取文件列表的方法/属性。不知道是不是这个HtmlInputFile只能单文件上传，有哪位清楚，还望告知下。

注意两个区别：

一：FileUpload.FileName获取客户端上传文件名（不带路径），而file1.PostedFile.FileName 和Request.Files["file"].FileName在不同浏览器下情况不同：IE8下获得的是客户端上传文件的完全限定名（带路径），谷歌、苹果等浏览器下则仍为文件名（不带路径）。

二：FileUpload控件有HasFile属性，用于判断用户是否选择了上传文件，而后面两种方法则需要通过判断上传文件大小ContentLength属性，当用户没有选择上传文件时，该属性值为0。

可以看出FileUpload封装程度更高，但灵活性也稍差。

方法三：Html元素input type="file"

通过表单提交，获取Request.Files

<%-- enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。[在使用包含文件上传控件的表单时，必须使用multipart/form-data。]--%>
<form id="form1" runat="server" enctype="multipart/form-data">
<input type="file" name="file" multiple="multiple" />
<br />
<br />
<input type="text" name="author" value="huy" />
<asp:Button ID="Button1" runat="server" Text="上传到服务器" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="" Style="color: Red"></asp:Label>
</form> protected void Button1_Click(object sender, EventArgs e)
{
string name = Request.Form["author"];
Response.Write(name);
HttpFileCollection files = Request.Files;
if (files.Count > 0)
{
for (int i = 0; i < files.Count; i++)
{
files[i].SaveAs(Server.MapPath("~/Files/") + Path.GetFileName(files[i].FileName));
}
Label1.Text = "上传成功";
}
else
{
Label1.Text = "上传失败";
}
}

注意：form需要设置，enctype="multipart/form-data"。。多文件上传（multiple="multiple"） HTML5中支持

官网参考：HttpRequest.Files

也可以利用Ajax提交，FormData()，上传的文件支持移除，

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InputFileAjax.aspx.cs" Inherits="WebFormTest.FileUpload.InputFileAjax" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
/*为了不显示控件的未选择任何文件/上传个数*/
.surfaceThree {
position: relative;
width: 80px;
background: gainsboro;
border-radius: 6px;
text-align: center;
line-height: 30px;
font-size: 16px;
color: black;
} .surfaceThree input {
position: absolute;
top: 5px;
right: -110px;
height: 30px;
/* 重点代码让input隐藏 */
opacity: 0;
}
</style> <script src="../Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="email" runat="server">
</div> <div class="surfaceThree">
选择文件
<input type="file" multiple="multiple" name="fileUpload" id="fileUpload" onchange="uploadLogic(this)" />
</div>
<br />
<br />
<input type="text" name="author" value="huy" /> <asp:Button ID="Button1" runat="server" Text="上传到服务器" OnClick="Button1_Click" OnClientClick="return addFiles()" />
<asp:Label ID="Label1" runat="server" Text="" Style="color: Red"></asp:Label>
</form> <script type="text/javascript"> //单击上传的时候增加手动选择的附件
function addFiles() {
var formData = new FormData();
for (var i = 0; i < fileLists.length; i++) {
formData.append('file', fileLists[i]); //file可以任意
} $.ajax({
url: "InputFileAjax.ashx",
data: formData,
type: "post",
async: false,
contentType: false,
processData: false,
success: function (msg) {
var rs = jQuery.parseJSON(data);
if (rs.ReturnCode == 1) {
console.log("手動添加附件成功");
} else if (rs.ReturnCode == 0) {
console.log(rs.Message);
}
else {
alert("手動添加附件失敗:" + rs.Message);
}
},
error: function (e) {
alert("手動添加附件失敗");
}
});
} fileLists = [];
//多文件上传逻辑
function uploadLogic(obj) {
var filrarr = obj.files;
//console.log("这次上传的文件：");
//console.log(filrarr);
if ((fileLists.length + filrarr.length) > 10) {
alert("手動添加附件不鞥超過10個！");
return;
}
files = Array.prototype.slice.call(filrarr); //需要能动态修改fileList即可，第一想法是将它转化为数组进行操作。
fileLists = fileLists.concat(files);
console.log("现在总的文件：");
console.log(fileLists); var email = $('#email');
for (var i = 0; i < filrarr.length; i++) { var addtr = $("<div style='margin: 5px 10px;display:inline-block'>" +
"<div class='label label-primary' title='" + filrarr[i].name + "' style='vertical-align: middle;margin-right: 10px;display:inline-block;width:150px;overflow: hidden; text-overflow: ellipsis;height:20px'>" +
filrarr[i].name + "</div>" +
"<input type=\"button\" id='btnRemoveAttach' style='color: red;border-radius: 6px' onclick='RemoveMulFileUpload(this,\"" + filrarr[i].name + "\")' value=\"移除\" />" +
"</div>");
email.append(addtr);
}
} //移除多文件上传控件的文件
function RemoveMulFileUpload(div, filename) {
var ind = $(div).parent().index();
fileLists.splice(ind, 1);//修改fileLists
$(div).parent().remove();
console.log("删除文件：" + filename + "。后现在总的文件：");
console.log(fileLists);
} </script>
</body>
</html>

注意：

1、processData参数：

用于对data参数进行序列化处理，默认值是true。默认情况下发送的数据将被转换为对象，对于文件File则不需要转换，此参数需要设置为false。否则可能报非法调用（Illegal invocation）。

2、普通参数传递与获取：

formData.append("param1","参数1");

string p1=Request.Form["param1"]; //普通参数获取

后端一般处理页

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;namespace WebFormTest.FileUpload
{
/// <summary>
/// InputFileAjax1 的摘要说明
/// </summary>
public class InputFileAjax1 : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
AddUploadFiles(context); } /// <summary>
/// 增加手动上传的文件
/// </summary>
/// <param name="context"></param>
private void AddUploadFiles(HttpContext context)
{
var result = new Result() { ReturnCode = };
try
{
if (context.Request.Files.Count <= )
{
result.Message = "沒有額外添加附件";
context.Response.Write(JsonConvert.SerializeObject(result));
}
if (context.Request.Files.Count > )
{
result.Message = "手動添加附件不鞥超過10個";
context.Response.Write(JsonConvert.SerializeObject(result));
}
HttpFileCollection files = context.Request.Files;
if (files.Count > )
{
for (int i = ; i < files.Count; i++)
{
files[i].SaveAs(context.Server.MapPath("~/Files/") + Path.GetFileName(files[i].FileName));
}
}
context.Response.Write(JsonConvert.SerializeObject(result));
}
catch (Exception ex)
{
result.Message = ex.ToString();
context.Response.Write(JsonConvert.SerializeObject(result));
}
} public bool IsReusable
{
get
{
return false;
}
}
} public class Result
{
/// <summary>
/// 1成功，0错误
/// </summary>
public int ReturnCode { get; set; }
public string Message { get; set; }
}
}

其中：未选择任何文件/上传个数不显示

常规的是这样，

选择文件后，这个“未选择任何文件”则显示成选择了几个文件。但是移除文件这个个数不会变。所以想办法不需要显示这个。

.surfaceThree {
position: relative;
/*height: 30px;*/
width: 80px;
background: gainsboro;
border-radius: 6px;
text-align: center;
line-height: 30px;
font-size:16px;
color: black;
}.surfaceThree input {
position: absolute;
top: 5px;
right: -110px;
/*color: #fff;*/
height: 30px;
/* 重点代码让input隐藏 */
opacity: 0;
}<div class="surfaceThree">选择文件
<input type="file" multiple="multiple" name="fileUpload" id="fileUpload" onchange="uploadLogic(this)" />
</div>

上传图片限制大小、类型、像素

用到input标签来上传图片。图片有很多格式我们只需要其中的几种，就需要对用户上传的文件进行验证，在HTML5中有一个新的属性：accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断。

表单提交

前端控件都应该有一个name属性和”当前值“，在提交时，它们将以 name=value 的形式做为提交数据的一部分。

前台form表单的提交方式有很多种，例如：

1、form表单submit直接提交的方法
2、Ajax提交的方法
j3、query提交的方法
这里总结一下ajax提交的两种方式：

1.serialize() 方法：
通过序列化表单值，创建 URL 编码文本字符串。我们可以选择一个或多个表单元素（比如 input 及/或文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
所用到的语法为：$("form").serialize()

提交方法的代码段：$('form').submit(function() {

alert($(this).serialize());
return false;
});

最终序列化后，表单中数据会以下面这种方式提交到后台：a=1&b=2&c=3&d=4&e=5
这种方式处理表单时所适用的input标签类型是有限的，只适用于一些常用的类型例如text、checkbox、select、date等等，但是对于file文件类型的input框并不适用，那我们在用到ajax提交方式的时候应该如何提交file类型的input框数据呢?

2.封装FormData 对象，直接用$.ajax提交
将form表单中的内容封装成formdata的数据格式
FormData 对象可以把form中所有表单元素的name与value组成一个queryString，提交到后台，在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。

FormData的使用方法也是非常简单，直接传入form表单对象即可，如下：

var form = $('#form1');
var formdata = new FormData(form);
使用这种方式将数据封装后，file类型的文件数据即可以键值对的方式封装在formdata中，然后用ajx提交，方法如下：

$.ajax({
type : "POST",
url : "houtai/123.do",
data : formData,
async: false,
cache: false,
contentType: false,
processData: false,
success : function(msg) {
if(msg){
alert('提交成功！');
}
}
});

需要注意的是：以formdata的方式提交时需要添加async: false, 同步，否则后台无法接收到前台传过来的file文件数据，这样的提交方式，既可以提交任何一种type类型标签，又可以在提交之后得到返回结果，方便快捷又实用。

form表单提交过程

二、IIS搭建HTTP文件服务器（文件上传下载）

IIS环境准备

1、安装IIS

打开“控制面板”，找到“程序与功能”, 找到“启用或关闭Windows功能”,点进去之后，将“Internet Information Services”下所有节点都打勾（这样就搭建了一个功能完全的HTTP/FTP服务器），注意“WebDAV发布”必须要安装，这个跟文件服务器中文件访问权限有着很大的关系，如果想对服务器中某个具有读写权限的文件夹进行读写，就必须开启该选项，如下图所示：

2、添加网站

添加自己的一个网站，鼠标移到“网站”上方，右键点击鼠标，弹出菜单，在菜单中点击“添加网站”，如下图所示：

根据如下图所说的步骤，填写网站名称及选择物理路径，其他默认即可，然后点击“确定”按钮：

本网站仅作为文件服务器，因此，将服务器的文件浏览功能打开，以便浏览，具体操作为鼠标双击“目录浏览”后，将“操作”一栏里的“启用”打开，如下图所示：

3、WebDAV创作规则

进入，点击“WebDAV设置”，将①②所示红色框内的属性设置为图中所示的属性，并点击“应用”，如下图所示：

返回到“WebDAV创作规则”，点击“添加创作规则”，如下图所示：

在弹出的“添加创作规则”，将“允许访问此内容”选中，权限“读取、源、写入”都打勾，点击“确定”按钮关闭，如下图所示：

返回到“WebDAV创作规则”，点击“启用WebDAV”，

双击“身份验证”，将“匿名身份验证”（客户端读取文件）及“Windows身份验证”（客户端写入、删除）启用，如下所示：

为了能让文件服务器具有写入、删除功能，可以在现有Windows系统账户上新建一个隶属于“Power Users”的账户“test”（密码：123），如下图所示：

以上关于如何创建账户的内容，请自行百度

为了能让test账户顺利访问存放于E盘下的“TestWebSite”文件夹，需要为该文件夹设置Power Users组的访问权限，如下图所示：

关于如何将特定组或用户设置权限的问题，请自行百度。

查看本机IIS的IP地址，并在浏览器输入该IP，将会显示网站下内容。

自此，IIS文件服务器的搭建已经完毕。

使用C# WebClient访问IIS文件服务器

在使用WebClient类之前，必须先引用System.Net命名空间，文件下载、上传与删除的都是使用异步编程，也可以使用同步编程，

这里以异步编程为例：

1）文件下载：

//下载文件
string fileHttpPath = @"http://localhost/js/javascript/01.js";
string saveName = @"E:\IIS_Deploy\FileSystem\01.js";
SY.Filer.Http.HttpDownloadFile.DownloadFileAsync(fileHttpPath,saveName);
Console.WriteLine("文件下载结束");/// <summary>
/// http文件下载
/// </summary>
public class HttpDownloadFile
{
/// <summary>
/// 异步文件下载
/// </summary>
/// <param name="fileHttpPath">文件的http路径</param>
/// <param name="saveLocalName">本地保存的文件名称</param>
public static void DownloadFileAsync(string fileHttpPath, string saveLocalName)
{
try
{
using (WebClient client = new WebClient())
{
//使用默认的凭据——读取的时候，只需默认凭据就可以
client.Credentials = CredentialCache.DefaultCredentials;
Uri uri = new Uri(fileHttpPath); client.DownloadProgressChanged += Client_DownloadProgressChanged;
client.DownloadFileCompleted += Client_DownloadFileCompleted;
//异步下载指定路径
client.DownloadFileAsync(uri, saveLocalName);
}
}
catch (Exception ex)
{
Console.WriteLine(ex.ToString());
}
} //下载完成事件处理程序
private static void Client_DownloadFileCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
{
if (e.Cancelled)
{
Console.WriteLine("文件下载被取消");
}
//获取一个值，该值指示异步操作期间发生的错误
if (e.Error == null)
{
Console.WriteLine("文件下载成功");
}
else
{
//throw e.Error; //【异步操作上层捕获不到】
Console.WriteLine(e.Error.ToString());
}
} //下载进度事件处理程序
private static void Client_DownloadProgressChanged(object sender, DownloadProgressChangedEventArgs e)
{
Console.WriteLine($"{e.ProgressPercentage}:{e.BytesReceived}/{e.TotalBytesToReceive}");
}
}

2）文件上传：

//下载上传
string fileHttpPath = @"http://localhost/txt/Readme.txt";
string localfile = @"D:\0、入职20180820\Readme.txt";
SY.Filer.Http.HttpUploadFile.UploadFileAsync(fileHttpPath, localfile);
Console.WriteLine("文件上传结束");/// <summary>
/// http文件上传
/// </summary>
public class HttpUploadFile
{
/// <summary>
/// 异步文件上传
/// </summary>
/// <param name="fileSaveHttpPath">文件的http路径</param>
/// <param name="saveLocalName">本地的文件名称</param>
public static void UploadFileAsync(string fileSaveHttpPath, string localFile)
{
try
{
using (WebClient client = new WebClient())
{
//client.Credentials = CredentialCache.DefaultCredentials; //使用Windows登录方式
client.Credentials = new NetworkCredential("test", "hy123456@");
Uri _uri = new Uri(fileSaveHttpPath); //注册上传进度事件通知
client.UploadProgressChanged += Client_UploadProgressChanged;
client.UploadFileCompleted += Client_UploadFileCompleted; //异步将选择的上传文件到服务器
client.UploadFileAsync(_uri, "PUT", localFile);
}
}
catch (Exception ex)
{
Console.WriteLine(ex.ToString());
}
} //上传完成事件处理程序
private static void Client_UploadFileCompleted(object sender, UploadFileCompletedEventArgs e)
{
if (e.Cancelled)
{
Console.WriteLine("文件上传被取消");
return;
}
//获取一个值，该值指示异步操作期间发生的错误
if (e.Error == null)
{
Console.WriteLine("文件上传成功");
}
else
{
//throw e.Error; //【异步操作上层捕获不到】
Console.WriteLine(e.Error.ToString());
}
}
//上传进度事件处理程序
private static void Client_UploadProgressChanged(object sender, UploadProgressChangedEventArgs e)
{
Console.WriteLine($"{e.ProgressPercentage}:{e.BytesSent}/{e.TotalBytesToSend}");
} }