正文

ASP.Net上传文件

IP云
IP云V管理员/4 阅读
07/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在做Web项目时，上传文件是经常会碰到的需求。ASP.Net的WebForm开发模式中，封装了FileUpload控件，可以方便的进行文件上传操作。但有时，你可能不希望使用ASP.Net中的服务器控件，仅仅使用Input标签来实现文件上传。当然也是可以的。下面总结在项目中使用过的上传文件的方式。

一、使用Asp.Net中的FileUpload服务器端控件实现上传

使用asp.net中的服务器端控件FileUpload上传文件非常方便。FileUpload对上传操作进行了封装，你只需要调用SaveAs方法即可完成上传。下面是简单的上传代码。

<p>服务器端控件上传</p>
<asp:FileUpload ID="MyFileUpload" runat="server" />
<asp:Button ID="FileUploadButton" runat="server" Text="上传"
onclick="FileUploadButton_Click" />

1 protected void FileUploadButton_Click(object sender, EventArgs e)
2 {
3 if (MyFileUpload.HasFile)
4 {
5 string filePath = Server.MapPath("~/UploadFiles/");
6 string fileName = MyFileUpload.PostedFile.FileName;
7 MyFileUpload.SaveAs(filePath + fileName);
8 Response.Write("<p >上传成功!</p>");
9 }
10 else
11 {
12 Response.Write("<p >请选择要上传的文件!</p>");
13 }
14 }

当然，在实际项目中就不能这么简单的保存文件了。你至少得增加一些文件类型的判断，防止用户上传一些能够威胁到系统安全的文件。你可以采用客户端JS验证的方式，也能够在.cs的服务器端代码中验证。

在asp.Net WebForm开发框架下，我们也可以利用Html的Input标签来上传文件。这时候需要注意的一点，这个type为file的Input标签需要加上runat="server"属性,否则在后台Request.Files获取不到上传的文件。

<p>使用Html的Input标签上传</p>
<input type="file" name="MyFileUploadInput" runat="server" /><asp:Button
ID="InputFileUploadButton" runat="server" Text="上传"
onclick="InputFileUploadButton_Click" />

1 protected void InputFileUploadButton_Click(object sender, EventArgs e)
2 {
3 HttpFileCollection files = Request.Files;
4 string filePath = Server.MapPath("~/UploadFiles/");
5 if (files.Count != 0)
6 {
7 string fileName = files[0].FileName;
8 files[0].SaveAs(Path.Combine(filePath, fileName));
9 Response.Write("<p>上传成功</p>");
10 }
11 else
12 {
13 Response.Write("<p>未获取到Files:"+ files.Count.ToString()+"</p>");
14 }
15 }

以这种方式进行上传的时候，好处就是可以方便的用JS生成多个Input标签来上传多个文件。且此时需要注意的是，Input标签必须要有name属性。在后台，只需要循环调用SaveAs()方法即可。

接下来的两种上传方式（二和三）都会用到Ajax异步提交数据，后台使用一个.ashx文件进行处理。两种方式共用一个文件，ajax传入的url参数中加一个method来区分哪种方式传过来的。后台代码如下：

1 public void ProcessRequest(HttpContext context)
2 {
3 string method = context.Request.QueryString["method"].ToString();
4 switch (method)
5 {
6 case "ajaxFileUpload":
7 ajaxFileUpload(context);
8 break;
9 case "formDataUpload":
10 formDataUpload(context);
11 break;
12 default:
13 break;
14 }
15 }
16
17 private static void formDataUpload(HttpContext context)
18 {
19 HttpFileCollection files = context.Request.Files;
20
21 string msg = string.Empty;
22 string error = string.Empty;
23 if (files.Count > 0)
24 {
25 files[0].SaveAs(ConfigurationManager.AppSettings["FilePath"].ToString() + System.IO.Path.GetFileName(files[0].FileName));
26 msg = " 成功! 文件大小为:" + files[0].ContentLength;
27 string res = "{ error:'" + error + "', msg:'" + msg + "'}";
28 context.Response.Write(res);
29 context.Response.End();
30 }
31 }
32
33 private static void ajaxFileUpload(HttpContext context)
34 {
35 HttpFileCollection files = context.Request.Files;
36
37 string msg = string.Empty;
38 string error = string.Empty;
39 if (files.Count > 0)
40 {
41 files[0].SaveAs(ConfigurationManager.AppSettings["FilePath"].ToString() + System.IO.Path.GetFileName(files[0].FileName));
42 msg = " 成功! 文件大小为:" + files[0].ContentLength;
43 string res = "{ error:'" + error + "', msg:'" + msg + "'}";
44 context.Response.Write(res);
45 context.Response.End();
46 }
47 }

二、使用Html中的Input标签加FormData对象实现

使用这种方式上传附件，对浏览器有些要求。FormData属于Html5中新增的特性，IE浏览器只有在10以上才支持。所以，个中利弊自己权衡，但用起来觉得方便。下面直接上代码：

1 function formDataUpload() {
2 var fileupload = document.getElementById('fileToUpload').files;
3 var formdata = new FormData();
4 formdata.append('files', fileupload[0]);
5 var xmlHttp = new XMLHttpRequest();
6 xmlHttp.open("post", 'Handlers/FileUpload.ashx?method=formDataUpload');
7 xmlHttp.onreadystatechange = function () {
8 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
9 alert('上传成功');
10 }
11 }
12 xmlHttp.send(formdata);
13 }

三、使用Jquery中的ajaxfileupload.js插件实现上传

使用此方法，需要引用jquery.js和ajaxfileupload.js两个文件。还需要注意的部分是两个文件的版本匹配问题，可能在使用过程中会出现些异常。此时发挥搜索引擎的作用，总能找到你需要的解决方案。

JavaScript代码如下：

1 function ajaxFileUpLoad() {
2 $.ajaxFileUpload(
3 {
4 url: 'Handlers/FileUpload.ashx?method=ajaxFileUpload',
5 secureuri: false,
6 fileElementId: 'fileToUpload',
7 dataType: 'json',
8 success: function (data, status) {
9 $('#img1').attr("src", data.imgurl);
10 if (typeof (data.error) != 'undefined') {
11 if (data.error != '') {
12 alert(data.error);
13 } else {
14 alert(data.msg);
15 }
16 }
17 },
18 error: function (data, status, e) {
19 alert(e);
20 }
21 }
22 )
23 return false;
24 }

Html页面上的代码如下：

1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
4 <script type="text/javascript" src="Scripts/ajaxfileupload.js"></script>
5 <script type="text/javascript">
6 $(function () {
7 $("#ajaxfileuploadButton").click(function () {
8 ajaxFileUpLoad();
9 })
10
11 $("#formdataButton").click(function () {
12 formDataUpload();
13 })
14 });
15
16 </script>
17 <title></title>
18 <script type="text/javascript">
19
20 </script>
21 </head>
22 <body>
23 <input type="file" id="fileToUpload" name="fileToUpload" />
24 <input type="button" id="ajaxfileuploadButton" value="ajaxfileupload插件上传" />
25 <input type="button" id="formdataButton" value="FormData方式上传" />
26 </body>
27 </html>