本文转自:http://www.ironspeed.com/articles/Maintain%20File%20Upload%20Control/Article.aspx

Introduction

For security reasons, the File Upload control does not save the posted file name in its View State, so the file is lost on postback.  This is not a bug; it was designed this way so the file cannot be hijacked.  Even Iron Speed’s technical support application has this behavior (compare Fig. 1 and Fig. 2).  For most programmers, the issue is not a big problem.  People with less programming background, however, may become annoyed if their input data gets lost again and again.  During the development of one of my projects, I received so many complaints about the issue that I had to find a solution.

Figure 1. File Upload control with a posted file.

Figure 2.  The posted file is lost on postback after "Add Attachment" is clicked.

Solution

I borrowed my idea for a solution from Google Mail (Gmail).  Gmail allows an email to have multiple files attached.  When you attach more than one file, the previously posted files are shown as text links (Fig. 3).  This can also be accomplished in Iron Speed Designer.

Although the File Upload control cannot save the posted file in its View State, the file can be saved in a session variable for later use.  Its name can be displayed in a Literal control.  Here is the design.

  1. Hide a Literal control behind the File Upload control.
  2. On postback, if the File Upload control contains a file, set the file name to the Literal control. Show the Literal control, and hide the File Upload control.
  3. Save the posted file to a session variable, since it will be needed when the record is saved.

Figure 3.  Gmail's work-around for multiple attachments.

Implementation

Step 1: Add a Literal control to TableControlRow Drag and drop a Literal control (non data-bound) alongside the File Upload control (Fig. 4).  Name it "FilePath".  Note the hidden control "ATCH_FILENM" stores the file name to the database, and the FileDeleteButton. The FileDeleteButton removes the posted file and cancels its upload.

Figure 4.  Add a Literal control alongside the File Upload control.

Step 2: Add a PreRender event handler to switch the visibilities of the controls In the MyTableControlRow class (in file: ...\<App Name>\App_Code\MyFolder\MyPage.Controls.cs or .vb), insert the following code.

C#:

public MyTableControlRow(){     PreRender += new EventHandler(MyTableControlRow_PreRender); }

private void MyTableControlRow_PreRender(object sender, EventArgs e){     if(ATCH_FILE.PostedFile != null && ATCH_FILE.PostedFile.FileName.Length > 0){         // Save PostedFile to a session variable         Page.Session[FilePath.ClientID] = ATCH_FILE.PostedFile;

// Also set filename to ATCH_FILENM         string fullPath = ATCH_FILE.PostedFile.FileName;         int LastIndex = fullPath.LastIndexOf("\\");         ATCH_FILENM.Text = fullPath.Substring((LastIndex + 1));     }

// Show Literal if PostedFile is in the session variable.     if(Page.Session[FilePath.ClientID] != null) {         FilePath.Text = ((HttpPostedFile)Page.Session[FilePath.ClientID]).FileName;         FilePath.Visible = true;         ATCH_FILE.Visible = false;     }else{ // Otherwise, show the FileUpload         FilePath.Visible = false;         ATCH_FILE.Visible = true;     } }

Visual Basic .NET:

Public Sub New()     AddHandler PreRender, AddressOf MyTableControlRow_PreRender End Sub

Private Sub MyTableControlRow_PreRender(ByVal sender As Object, _     ByVal e As EventArgs)     If Not ATCH_FILE.PostedFile Is Not Nothing AndAlso _         ATCH_FILE.PostedFile.FileName.Length > 0 Then         ‘ Save PostedFile to a session variable         Page.Session(FilePath.ClientID) = ATCH_FILE.PostedFile

‘ Also set filename to ATCH_FILENM         Dim fullPath As String = ATCH_FILE.PostedFile.FileName         Dim LastIndex As Integer = fullPath.LastIndexOf("\\")         ATCH_FILENM.Text = fullPath.Substring((LastIndex + 1))     End If

‘ Show Literal if PostedFile is in the session variable.     If Not Page.Session(FilePath.ClientID) Is Not Nothing then         FilePath.Text = _             (DirectCast(Page.Session(FilePath.ClientID), HttpPostedFile)).FileName         FilePath.Visible = True         ATCH_FILE.Visible = False     Else         ‘ Otherwise, show the FileUpload         FilePath.Visible = False         ATCH_FILE.Visible = True     End If End Sub

Step 3: Override FileDeleteButton_Click event handler While still in the MyTableControlRow class, add the following code to remove the posted file from the session if the user discards the file.

C#:

public override void FileDeleteButton_Click(object sender, ImageClickEventArgs args){     base.FileDeleteButton_Click(sender, args);     this.Visible = false;     this.Page.Session.Remove(FilePath.ClientID); }

Visual Basic .NET:

Public Overloads Overrides Sub FileDeleteButton_Click(ByVal sender As Object, ByVal args As ImageClickEventArgs)     MyBase.FileDeleteButton_Click(sender, args)     Me.Visible = False     Me.Page.Session.Remove(FilePath.ClientID) End Sub

Step 4: Override GetUIData() for uploading the file Again in the MyTableControlRow class, insert the following code.

C#:

public override void GetUIData(){     HttpPostedFile file = null;     if (ATCH_FILE.PostedFile != null &&         ATCH_FILE.PostedFile.FileName.Length > 0 &&         ATCH_FILE.PostedFile.ContentLength > 0)         file = ATCH_FILE.PostedFile;     else         file = Page.Session[FilePath.ClientID] as HttpPostedFile;

if(file != null){         DataSource.Parse(MiscUtils.GetFileContent(file), MyTable.ATCH_FILE);         DataSource.Parse(HttpUtility.HtmlDecode(ATCH_FILENM.Text),           MyTable.ATCH_FILENM);     } }

Visual Basic .NET:

Public Overloads Overrides Sub GetUIData()     Dim file As HttpPostedFile = Nothing     If Not ATCH_FILE.PostedFile Is Not Nothing AndAlso _         ATCH_FILE.PostedFile.FileName.Length > 0 AndAlso _         ATCH_FILE.PostedFile.ContentLength > 0 Then         file = ATCH_FILE.PostedFile     Else         file = TryCast(Page.Session(FilePath.ClientID), HttpPostedFile)     End If

If Not file is Not Nothing Then         DataSource.Parse(MiscUtils.GetFileContent(file), MyTable.ATCH_FILE)         DataSource.Parse(HttpUtility.HtmlDecode(ATCH_FILENM.Text), _           MyTable.ATCH_FILENM)     End If End Sub

Step 5: Rebuild and run Here is what it looks like (Fig. 5).

Figure 5. Upload multiple files in Iron Speed Designer generated app.

Conclusion

Although the File Upload control cannot save the posted file in its View State, the file can be saved in a session variable for later use.  Its name can be displayed in a Literal control.

About the Author

Jing Ding has a PhD in Computer Engineering, Bioinformatics and Computational Biology, and an M.S. in Toxicology from Iowa State University. He received his B.S. in biophysics from Fundan University in Shanghai, China. He is a self-taught programmer who "played" with assembly, C and C++ in the 1990s. He took a break from programming from 1997 to 2000. When he picked it up again in 2001, he worked with Java. Jing began working with C# and .NET in 2006. 
   
 

[转]Maintain File Upload Control on Postbacks的更多相关文章

  1. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  2. jQuery File Upload done函数没有返回

    最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...

  3. kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

    kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

  4. 【转发】Html5 File Upload with Progress

    Html5 File Upload with Progress               Posted by Shiv Kumar on 25th September, 2010Senior Sof ...

  5. 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  6. jquery file upload 文件上传插件

    1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...

  7. jQuery File Upload跨域上传

    最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...

  8. 《Play for Java》学习笔记(六)文件上传file upload

    一. Play中标准方法 使用表单form和multipart/form-data的content-type类型. 1.Form @form(action = routes.Application.u ...

  9. jquery ajax发送delete(use in jquery file upload delete file)

    环境: jQuery file upload HTML example code <div class="pic-preview"> <div class=&qu ...

随机推荐

  1. vim MiniBufExplorer 插件

    MiniBufExplorer安装好久了,但一直没怎么使用过. 今天查了下资料,作为一个备份. 当你只编辑一个buffer的时候MiniBufExplorer派不上用场, 当 你打开第二个buffer ...

  2. poj 3180 The Cow Prom(强联通分量)

    http://poj.org/problem?id=3180 The Cow Prom Time Limit: 1000MS   Memory Limit: 65536K Total Submissi ...

  3. [iOS基础控件 - 6.9.1] 聊天界面Demo 代码

    框架:   所有代码文件:   Model: // // Message.h // QQChatDemo // // Created by hellovoidworld on 14/12/8. // ...

  4. 13个Cat命令管理文件实例汇总

    在Linux系统中,大多数配置文件.日志文件,甚至shell脚本都使用文本文件格式,因此,Linux系统存在着多种文本编辑器,但当你仅仅想要查看一下这些文件的内容时,可使用一个简单的命令-cat. c ...

  5. javascript表单(form)序列化

    function serialize(form){ var part =[]; var field = null; var i; var j; var len; var optLen; var opt ...

  6. Java学习笔记(一):数据类型与变量

    数据类型 Java中存在2种数据类型,下面我们来详解一下: 基本数据类型: 引用数据类型: 可以用一张表来记录: 基本数据类型 整型 byte:1个字节8位,取值范围为:[-128, 127],直接写 ...

  7. NET程序的破解--静态分析(Xenocode Fox 2006 Evaluation)

    NET程序已经红红火火的兴起,就象LINUX一样势不可挡的涌来.作为一名Cracker,你会选择躲避吗?嘿嘿,对俺而言,挑战更富有趣味. 破解好几个.NET的程序了,一直想写出来,只是时间问题,所以拖 ...

  8. Enterprise Library 服务问题

    在使用Enterprise Library而没有注册服务的时候会出现这样的问题,"Editing Post "Failed to create instances of perfo ...

  9. 剑指OFFER之重建二叉树(九度OJ1385)

    题目描述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7 ...

  10. 在Hibernate中使用HibernateTemplate来进行包含sql语句的查询

    /**     * 使用sql语句进行查询操作     * @param sql     * @return     */    public List queryWithSql(final Stri ...