ASP.net多文件上传的解决方案

        .NET Framework 2.0给我们提供了新的文件上传工具FileUpload,针对多文件上传的需求该控件表现仍不能让人满意,本文介绍了一个提供针对该需求的多文件上传的控件MultiFileUpload。

        源代码下载 

MultiFileUpload界面预览

        我的解决方案如下:在客户端使用JavaScript控制上传单元的数量,点击"Add upload”后触发Uploading事件,程序在服务器端通过Files属性(Request.Files)获取用户端所有上传的文件的HttpPostedFile集合。该控件具备如下特性:

  • 允许一次上传多个附件
  • 允许用户添加/删除上传单元的个数
  • 允许用户设置上传文件的最大数目
  • 检查上传文件的重复性

主要实现途径

上传单元数目控制的实现

该部分主要借助JavaScript中的parentElement, createElement, insertAdjacentElement, appendChild, removeChild等属性和方法实现,添加的一个文件项的代码单元为:

<div>
    
<input type=”file” name=”file”/>
    
<input type=”button” value=”Delete” onclick=”removeItem()”/>
</div>

把元素放在div里的目的是为了方便删除操作(只需要remove掉div就可以),以下是几个主要的js函数介绍:

  • get_container() 获取用于添加元素的容器的引用
  • get_addButton() 获取"Add Upload"按钮的应用
  • get_delButton() 创建"delete"按钮,声明该按钮的click事件(删除上传单元)处理程序
  • get_fileUpload() 创建input type="file",声明其change事件(验证文件的重复性)处理程序
  • addItem() 添加一个上传单元
  • removeItem() 移除一个上传单元
上传文件重复性检查的实现

        checkFileExist() 文件的重复性检查,在每次input type="file"的值发生改变时触发。检测方式为遍历容器中所有的input type="file",当检测到重复文件存在时,会给出重复性提示,同时将相应的input type=file清空.这里因为intput的value属性是只读,为了清除其内部内容,采用的方案为先移除该元素,然后在相同位置添加该元素

function checkFileExist(){var filename=event.srcElement.value; var duplicate = 0;var elems =  get_container().getElementsByTagName("input");for(var i=0;i<elems.length; i++){if(elems[i].type == "file" && elems[i].value == filename){duplicate++;if(duplicate>1){alert("不能重复选择文件。"); var offset = event.srcElement.nextSibling;  var parent = event.srcElement.parentElement;parent.removeChild(event.srcElement);offset.insertAdjacentElement("beforeBegin", get_fileUpload());  return; }} }}
自定义控件的设计

        该控件提供如下公共属性和事件:

  • Files属性: 获取客户端上传文件的集合
  • MaxFilesCount属性: 允许用户添加的上传单元数目的上限
  • Uploading事件: 当用户向服务器发送上传文件时触发

        控件主要重写了以下方法:

  • CreateChildControls, 控件使用Button类型的m_btnUpload来承载用户上传文件的Uploading事件,在该方法中将m_btnUpload添加到控件的Control集合
  • RenderContent,将控件工作需要的HTML元素和JScript代码发送到客户端

        为了方便维护和使用,JScript代码被封装到Resource文件中。

使用举例

ASPX页面

<%@ Register Namespace="MultiFileUpload" Assembly="MultiFileUpload" TagPrefix="asp" %>

<asp:MultiFileUpload ID="mfu1" runat="server" OnUploading="mfu1_Uploading" MaxFilesCount="3" />

.CS文件
    protected void mfu1_Uploading(object sender, EventArgs e)
    
{
        
for(int i=0;i<mfu1.Files.Count;i++)
        
{
            Label1.Text 
+= Request.Files[i].FileName + "<br/>";
        }

    }

发布了10 篇原创文章 · 获赞 1 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览