本文转自: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. maven 控制台乱码

    在pom.xml加一条配置 <project> …… <properties> <argLine>-Dfile.encoding=UTF-8</argLine ...

  2. JSF 2 graphicImage example

    In JSF, you can use <h:graphicImage /> tag to render a HTML "img" element. For examp ...

  3. ISP与IAP的区别

    转: ISP(In-System Programming)在系统可编程,指电路板上的空白器件可以编程写入最终用户代码, 而不需要从电路板上取下器件,已经编程的器件也可以用ISP方式擦除或再编程.IAP ...

  4. FIREDAC连接SQLITE乱码的解决

    在好多群里面都碰到问“FIREDAC连接SQLITE乱码的”的问题的同仁,遂将解决方法贴出来: 如上图所示设置 stringFormat为unicode即可

  5. 解读XMP元数据中ALAssetRepresentation

    当用户进行某些更改(裁剪,消除红眼,...),在内置 Photos.app iOS上,这些更改将不会应用到由相应 fullResolutionImage 返回的 ALAssetRepresentati ...

  6. status pending状态

    开发采用ssh,注解的方式,事物也application.xml配置了,但是在业务层没有使用@Transactional造成浏览器一直处于status pending状态,为什么没有使用@Transa ...

  7. Python3.5.2官方文档学习备忘录

    网址:https://docs.python.org/3/ 虽然学习官方文档有些耗时,不过看最原版的还是感觉好一点,原汁原味没有曲解没有省略. 从命令行向Python传递参数,运行:python - ...

  8. cocos2d-x 手电筒效果

    转自:http://blog.csdn.net/xujiezhige/article/details/8448524# 常见的手电筒效果,可以通过CCRenderTexture来实现.主要是通过修改渲 ...

  9. UVa712 S-Trees

    // UVa712 S-Trees // Rujia Liu // 题意:给一棵满二叉树,每一层代表一个01变量,取0时往左走,取1时往右走.给出所有叶子的值,以及一些查询(即每个变量的值),求最后到 ...

  10. Java网页数据采集器[续篇-远程操作]【转载】

    本期概述 上期我们学习了html页面采集后的数据查询, 但这仅仅是在本地查询数据库,如果我们想通过远程操作来进行数据的采集,存储和查询,那又该怎么做呢? 今天我们一起来学习下:如何通过本地客户端远程访 ...