AsyncFileUpload的用法（点击预览选择后自动上传）（Ajax.net）

前几天我为了一个项目的效果，上网上找了很长时间，上百度提问，scdn提问，去别人的博客，看别人的问题和解答，反正是哪里有相关的字眼，哪里就有我的身影。

我要达成的效果就是在上传图片之前先预览到缩略图，然后再点击提交按钮，提交所有的资料。我想了一个办法就是js，众所周知，img控件是不支持本地图片显示的，所以我想到了用filter滤镜的方式来实现。终于在我不懈的努力下，用filter实现了。在vs上运行的时候，一点问题也没有，可是一放到IIS上发布之后，天哪，这都是什么情况啊！在html文件中需要加载项，在aspx文件中根本就不显示。

于是我继续上网找，终于我发现了一个jQuery写的代码。能够很好的适应aspx网页了。但是别人测试的时候，用什么的都有。这个浏览器行，那个又不行了。

我烦死了，便想换一种方式，用Ajax先吧图片上传，然后再用img控件显示，如果有那个浏览器敢不支持img，我……我……我绝对不用那个浏览器。

但是不行啊，传统的Ajax，需要在FileUpload的事件中写，但是前台和后交换数据的时候传递的是什么类型的参数呢？我不是高手，仅仅是个菜鸟。于是我再上网查，到处都有啊！就是看不懂！

终于我的脑袋闪现出了智慧的光芒。我用过AutoCompleteExtender这个控件。最新的Ajax控件，为什么现在不用下试试呢？

找到了！AsyncFileUpload！上网找用法虽然不多，但是很容易找到。我又偷了一点别人智慧的成果放在下面：

其实ajaxcontroltoolkit 挺傻瓜化的，先在vs建立歌网站，然后打开默认的default.aspx，拖个scriptmanager进去，添加下ajaxcontroltoolkit 的注册，然后拖个asyncfileupload进去，就基本能用了...

<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %>
2

<%@ register assembly="ajaxcontroltoolkit" namespace="ajaxcontroltoolkit" tagprefix="cc1" %>
4

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd%22>
6

<html xmlns="http://www.w3.org/1999/xhtml%22>
8

<head runat="server">
9

<title>asyncfileupload</title>
10

</head>
11

<body>
12

<form id="form1" runat="server">
13

<div>
14

<asp:scriptmanager id="scriptmanager1" runat="server">
15

</asp:scriptmanager>
16

<cc1:asyncfileupload id="asyncfileupload1" runat="server" />
17

</div>
18

</form>
19

</body>
20

</html>
21

然后我们看下几个有用的属性吧：

`属性`	说明
`completebackcolor`	上传成功后显示的颜色（默认为淡黄绿色lime）
errorbackcolor	上传出错后显示的颜色（默认为红red）
uploadingbackcolor	正在上传时显示的颜色（默认为白）
uploaderstyle	有两种选择，traditional 和 modern，默认是traditional，没大弄明白两者在实际中的区别，希望有明白的大大帮我解答一下吧
throbberid	在上传文件时显示的控件的id，一般是用gif图片
hasfile	返回一个布尔值，来判定是否存在文件

其他还有似乎控件都通用的width，length，font，border，css样式之类的属性就不介绍了

再来看下控件的事件吧:

事件	执行方式	说明
`onclientuploaderror`	client	当上传出错事执行
`onclientuploadstarted`	client	当上传开始时执行
`onclientuploadcomplete`	client	当上传完成时执行
`onuploadedcomplete`	server	当上传完成时执行

有了属性和事件，就重新定义下我们的asyncfileupload吧:

我们首先需要个image （当然，文本也可以），好在上传文件时页面上有点显示，这年头不是都强调用户体验嘛

<asp:image id="imageuploading" runat="server" imageurl="/images/loader.gif"/>

还需要个label，好显示上传前后的信息:

<asp:label id="labeluploadstatus" runat="server" text=""></asp:label>

好了，现在可以定义我们的asyncfileupload了:

<cc1:asyncfileupload id="asyncfileupload1" width="300px" runat="server"
             onclientuploaderror="asyncfileupload1_uploaderror" onclientuploadstarted="asyncfileupload1_startupload"
             onclientuploadcomplete="asyncfileupload1_uploadcomplete"
             completebackcolor="lime" uploaderstyle="modern"
             errorbackcolor="red" throbberid="imageuploading"
             onuploadedcomplete="asyncfileupload1_uploadedcomplete"
             uploadingbackcolor="blue" />

接着开始写javascript事件:

首先是上传失败的提示:

function asyncfileupload1_uploaderror(sender, args)
{
document.getelementbyid('labeluploadstatus').innertext = "对不起，文件“" + args.get_filename() + "”上传出错，原因：" + args.get_errormessage() ;
}

然后是开始上传时的提示:

function asyncfileupload1_startupload(sender, args)
{
document.getelementbyid('labeluploadstatus').innertext = "文件“" + args.get_filename() + "”正在上传，请稍等";
}

最后是上传完成后的提示:

function asyncfileupload1_uploadcomplete(sender, args)
{
document.getelementbyid('labeluploadstatus').innertext = "文件“" + args.get_filename() + "”上传完成，文件大小：" + args.get_length() + " bytes";
}

然后就是写服务器事件了

protected void asyncfileupload1_uploadedcomplete(object sender, ajaxcontroltoolkit.asyncfileuploadeventargs e)
2

{
3

system.threading.thread.sleep(5000);//由于本机上传速度太快，所以延迟下好看上传时的效果
4

//取当前时间，以时间+文件名来保存上传文件
5

datetime dt = datetime.now.tolocaltime();
6

//判定是否有文件，有则保存
7

if (asyncfileupload1.hasfile)
8

{
9

//设置文件路径和文件名
10

string strpath = mappath("~/uploads/") + dt.tostring().trim().replace("/", "-").replace(":","：") + e.filename.tostring().trim();
11

//保存文件
12

asyncfileupload1.saveas(strpath);
13

}
14

}
16

额格式好像不如人家的好看。不过不要紧！这些代码中有些错误。在asyncfileupload1控件下面，加一个div层 id=“labeluploadstatus” 就OK了。

我在这些代码的基础上做了一些修改很容易就实现了。先在页面上放了一个img控件，id=“idImg” ，然后在后台服务器事件asyncfileupload1_uploadedcomplete中，将保存的文件名改成了id+文件名的格式（我的效果可是在用户登录后才能用的），在js方法asyncfileupload1_uploadcomplete中加了document.getelementbyid("idImg").src="/Upload/"+(刚才服务器控件保存的文件名);

好了。完成了！

我觉得这个方法是很简单，可是对网站效率和用户体验都是一种考验。我还是想用filter的那种方式来实现。还有就是用传统的Ajax，也就是WebMethod的那种方式，前台后台数据交换的时候，应该如何交换呢？有没有知道的朋友来帮我解决一下呢！！

最后再来一句：嘎嘎……

posted on 2011-08-31 11:05 .net 流氓阅读(3469) 评论(1) 收藏举报