Время от времени приходится организовывать возможность загрузки пользователями файлов на сервер: загрузка аватарок, файлов для галереи и т.д.  

Для решения этой задачи существует стандартный ASP.NET компонент FileUpload, который, в свою очередь, педставляет html-тэг <input type="file" />. В простнйшем случае код для загрузки файлов будет выглядеть так:

  •  Default.aspx:
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
    2.  
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    4.  
    5. <html xmlns="http://www.w3.org/1999/xhtml">
    6. <head runat="server">
    7.     <title></title>
    8. </head>
    9. <body>
    10.     <form id="form1" runat="server">
    11.     <div>
    12.         <asp:FileUpload ID="fu" runat="server" />
    13.        
    14.         <input type="submit" value="Upload" />
    15.     </div>
    16.     </form>
    17. </body>
    18. </html>
    19.  
    20.  

  • Default.aspx.cs
    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Web;
    5. using System.Web.UI;
    6. using System.Web.UI.WebControls;
    7. using System.IO;
    8.  
    9. namespace WebApplication1
    10. {
    11.     public partial class _Default : System.Web.UI.Page
    12.     {
    13.         protected void Page_Load(object sender, EventArgs e)
    14.         {
    15.             if (IsPostBack && fu.FileContent != null)
    16.             {
    17.                 fu.PostedFile.SaveAs(path);
    18.             }
    19.         }
    20.     }
    21. }
    22.  
    23.  
Этот способ имеет несколько недостатков, один из которых - необходимость делать полный postback. Поэтому возникает желание сделать это с промощью AJAX. Т.к. использование AJAX подразумевает собой применение объекта XMLHttpRequest, который из-за соображений безопастногсти запрещает передавать на сервер файлы, то решать данную задачу приходится другим способом. А именно с использованием iframe.
Переделаем предыдущий варивант и с приминением ifame:
  • Default.aspx: 
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
    2.  
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    4.  
    5. <html xmlns="http://www.w3.org/1999/xhtml">
    6. <head runat="server">
    7.     <title></title>
    8. </head>
    9. <body>
    10.     <script type="text/javascript">
    11.         function onFormSubmit() {
    12.             var formUpload = document.getElementById('form1');
    13.             formUpload.target = 'upload_target';
    14.             formUpload.action = 'default.aspx';

    15.         }
    16.     </script>
    17.     <form id="form1" onsubmit="onFormSubmit();">
    18.     <div>
    19.         <input id="file1" type="file" name="file1" /> <br />
    20.         <input id="file2" type="file" name="file2" />
    21.        
    22.         <input type="submit" value="Upload" />
    23.        
    24.         <iframe id="upload_target1" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
    25.     </div>
    26.     </form>
    27. </body>
    28. </html>
    29.  

  • Default.aspx.cs:
    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Web;
    5. using System.Web.UI;
    6. using System.Web.UI.WebControls;
    7. using System.IO;
    8.  
    9. namespace WebApplication1
    10. {
    11.     public partial class _Default : System.Web.UI.Page
    12.     {
    13.         protected void Page_Load(object sender, EventArgs e)
    14.         {
    15.             if (IsPostBack)
    16.             {
    17.                 HttpFileCollection uploads = HttpContext.Current.Request.Files;
    18.                 for (int i = 0; i < uploads.Count; i++)
    19.                 {
    20.                     HttpPostedFile upload = uploads[i];
    21.  
    22.                     if (upload.ContentLength == 0)
    23.                         continue;
    24.  
    25.                     upload.SaveAs(path);
    26.                 }
    27.  
    28.             }
    29.         }
    30.     }
    31. }
    32.  
    33.  
Таким образом мы получаем ajax-эффект закгрузки файлов на сервер. Ещё одним интересным способом загрузки файлов является использование flash-компонентов (http://www.swfupload.org/). Готовый к приминению ajax-компонент можно скачать здесь: http://ajaxuploader.com/. Посмотреть how-to видео можно на сайте ASP.NET (http://www.asp.net/learn/videos/)

Comments

mihasic

Monday, September 15, 2008 1:20 PM

mihasic

а что за функция afterUpdate? если можно с ссылкой на доку

e0ne Ukraine

Monday, September 15, 2008 1:55 PM

e0ne

2 mihasic: спасибо за замечание, удалил из примера. в коде эта функция отвечала за сообщение о начале/конце загрузки.

Дмитрий

Monday, February 2, 2009 5:10 PM

Дмитрий

Возникает лишь одна проблема - сайт с реализацией через iframe не будет проходить жесткую валидацию XHTML ... ибо там frame запрещен

Comments are closed