Время от времени приходится организовывать возможность загрузки пользователями файлов на сервер: загрузка аватарок, файлов для галереи и т.д.
Для решения этой задачи существует стандартный ASP.NET компонент FileUpload, который, в свою очередь, педставляет html-тэг <input type="file" />. В простнйшем случае код для загрузки файлов будет выглядеть так:
- Default.aspx:
-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
-
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-
<html xmlns="http://www.w3.org/1999/xhtml"> -
-
-
-
-
<form id="form1" runat="server"> -
-
<asp:FileUpload ID="fu" runat="server" />
-
-
<input type="submit" value="Upload" /> -
-
-
-
-
-
- Default.aspx.cs
-
using System;
-
using System.Collections.Generic;
-
using System.Linq;
-
using System.Web;
-
using System.Web.UI;
-
using System.Web.UI.WebControls;
-
using System.IO;
-
-
namespace WebApplication1
-
{
-
public partial class _Default : System.Web.UI.Page
-
{
-
protected void Page_Load(object sender, EventArgs e)
-
{
-
if (IsPostBack && fu.FileContent != null)
-
{
-
fu.PostedFile.SaveAs(path);
-
}
-
}
-
}
-
}
-
-
Этот способ имеет несколько недостатков, один из которых - необходимость делать полный postback. Поэтому возникает желание сделать это с промощью AJAX. Т.к. использование AJAX подразумевает собой применение объекта XMLHttpRequest, который из-за соображений безопастногсти запрещает передавать на сервер файлы, то решать данную задачу приходится другим способом. А именно с использованием iframe.
Переделаем предыдущий варивант и с приминением ifame:
- Default.aspx:
-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
-
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-
<html xmlns="http://www.w3.org/1999/xhtml"> -
-
-
-
-
<script type="text/javascript"> -
function onFormSubmit() {
-
var formUpload = document.getElementById('form1');
-
formUpload.target = 'upload_target';
-
formUpload.action = 'default.aspx';
-
-
}
-
-
<form id="form1" onsubmit="onFormSubmit();"> -
-
<input id="file1" type="file" name="file1" /> <br /> -
<input id="file2" type="file" name="file2" /> -
-
<input type="submit" value="Upload" /> -
-
<iframe id="upload_target1" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe> -
-
-
-
-
- Default.aspx.cs:
-
using System;
-
using System.Collections.Generic;
-
using System.Linq;
-
using System.Web;
-
using System.Web.UI;
-
using System.Web.UI.WebControls;
-
using System.IO;
-
-
namespace WebApplication1
-
{
-
public partial class _Default : System.Web.UI.Page
-
{
-
protected void Page_Load(object sender, EventArgs e)
-
{
-
if (IsPostBack)
-
{
-
HttpFileCollection uploads = HttpContext.Current.Request.Files;
-
for (int i = 0; i < uploads.Count; i++)
-
{
-
HttpPostedFile upload = uploads[i];
-
-
if (upload.ContentLength == 0)
-
continue;
-
-
upload.SaveAs(path);
-
}
-
-
}
-
}
-
}
-
}
-
-