本文转自: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. linux高级数据存储

    linux内此存储模式由5部分组成,自低向上的顺序: 物理卷,内核块设备驱动,内核文件系统驱动,虚拟文件系统,应用程序数据结构; 系统中所有的文件仅按此模式存储,无论是数据还是元数据,均在此模式下统一 ...

  2. Window下开发React-Native Android步骤

    1.安装Android开发环境 下载并安装JDK 下载并安装Android SDK, Android NDK 启动SDK下面的SDK Manager.exe,安装相关SDK Platform-tool ...

  3. 你应该知道的16个Linux服务器监控命令

    在不同的Linux发行版中,会有不同的GUI程序可以显示各种系统信息,比如SUSE Linux发行版中,就有非常棒的图形化的配置和管理工具YaST,KDE桌面环境里的KDE System Guard也 ...

  4. HTML5学习笔记(一):HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  5. (转)WordPress的主查询函数-query_posts()

    今天说说WordPress 的主查询函数 -query_posts(),因为我正在制作的主题里面多次用到了这个函数 . query_posts()查询函数决定了哪些文章出现在WordPress 主 循 ...

  6. OS X Git连接github

    1. 运行到.local 2. cd ~/.ssh查看文件是否存在 3. ssh-keygen(创建public & private key) 4. 或者运行如下命令:cd ~/.ssh &a ...

  7. CSS基础(03)

    1.简单了解浏览器是如何渲染页面和加载页面            浏览器就是通过HTTP 协议与服务器进行通信,取到数据之后进行渲染的过程,如图:    这图是园友的看着挺符合我思路就直接拿来用了,从 ...

  8. windows 下实现函数打桩:拦截API方式

    windows 下实现函数打桩:拦截API方式            近期由于工作须要,開始研究函数打桩的方法. 由于不想对project做过多的改动,于是放弃了使用Google gmock的想法. ...

  9. hdu 5586 Sum 最大子段和

    Sum Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5586 Desc ...

  10. delphi 13 打印相关

    打印 页面设置 打印预览 文档属性     //---------------------------------------------------------------------------- ...