Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

相信通过Asp Net的服务器控件上传文件在简单不过了 通过AjaxToolkit控件实现上传进度也不是什么难事 为什么还要自己辛辛苦苦来 实现呢？我并不否认”拿来主义“ 只是我个人更喜欢凡是求个所以然 本篇将阐述通过Html IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理 希望对你有多帮助

效果图

本文涉及到的知识点 前台用到Html Ajax JQuery JQuery UI

后台用到一般处理程序(IHttpHandler)和一般异步处理程序(IHttpAsyncHandler) 并涉及到”推模式“

一 创建Html网页

在创建的Web工程中添加一个Html文件 命名为UploadFile 在头文件中引入JQuery JQuery UI

<link href="Styles/jquery ui custom css" rel="stylesheet" type=text/css /><script src=Scripts/jquery min js type=text/javascript></script><script src=Scripts/jquery ui custom min js type=text/javascript></script>

关于无刷新文件上传

通过Ajax是不能上传文件的 无刷新上传是靠隐藏的iframe来实现的

<form id="form" target = "frameFileUpload" enctype="multipart/form data"><div id="progressBar" ></div><input type=file id="fileUpload" name=fileUpload /><span id="progressValue"></span><iframe id="frameFileUpload" name=frameFileUpload ></iframe><br /><input type=submit value="上传" id = "submit"/></form>

要将form标签的target属性设置为iframe的id 当然别忘了将form的enctype设置为multipart/form data

<div id="progressBar" class="page_speeder_1512316621"></div>

是用来显示上传文件时的进度条

在JS中加入如下处理

<script type=text/javascript>$(function () { $("#submit") button()$("#fileUpload") button()})</script>

此时效果:

二 实现文件上传

添加一个一般处理程序 命名为UploadFileHandler ashx

lishixinzhi/Article/program/net/201311/14305

不能这样的，你需要写一个新函数，设置一个共享变量，根据你上传的进度，设置这个共享变量的值，然后再写一个页面AJAX请求这个 页面 ，这个页面输出 这个共享变量的值，然后再处理成进度条。。。

asp.net 2.0里有个upload control. 大文件嘛，可能需要时间长点。而且用户可能觉得有进度什么的比较好。

下面是个前几天做的简单的例子。

给网页添加一个upload control,然后一个button.

在后台代码button_click event里添加代码

protected void btn_upload_Click(object sender, EventArgs e)

{

string path = @Page.MapPath("User_Edit.aspx").Replace("User_Edit.aspx","")+"Documents\\"

string s = path + Session["UserName"].ToString()

//检测文件夹是否存在，不存在的话建立一个

if (!System.IO.Directory.Exists(path+ Session["UserName"].ToString()))

{

System.IO.Directory.CreateDirectory(path + Session["UserName"].ToString())

}

\\上传文件

if (FileUpload1.HasFile)

{

FileUpload1.SaveAs(Server.MapPath("~/Seeker/Documents/"+ Session["UserName"].ToString() +"/"+ this.FileUpload1.FileName))

\\我用label显示文件已经上传成功

Label1.Text = "file uploaded!"

}

}

这只是个比较简单的例子。你还需要添加validation去约束用户可以上传的文件类型，以及大小等等。希望能帮到你。

---