前几天我为了一个项目的效果，上网上找了很长时间，上百度提问，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
3
<%@ register assembly="ajaxcontroltoolkit" namespace="ajaxcontroltoolkit" tagprefix="cc1" %> 4
5
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd%22> 6
7
<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样式之类的属性就不介绍了
再来看下控件的事件吧:
|
事件 |
执行方式 |
说明 |
|
|
client |
当上传出错事执行 |
onclientuploadstarted |
client |
当上传开始时执行 |
onclientuploadcomplete |
client |
当上传完成时执行 |
onuploadedcomplete |
server |
当上传完成时执行 |
有了属性和事件，就重新定义下我们的asyncfileupload吧:
我们首先需要个image （当然，文本也可以），好在上传文件时页面上有点显示，这年头不是都强调用户体验嘛
还需要个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() + "”正在上传，请稍等";
}最后是上传完成后的提示:
{
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
15
}16
额 格式好像不如人家的好看。不过不要紧！这些代码中有些错误。在asyncfileupload1控件下面，加一个div层 id=“labeluploadstatus” 就OK了。
我在这些代码的基础上做了一些修改很容易就实现了。先在页面上放了一个img控件，id=“idImg” ，然后在后台服务器事件asyncfileupload1_uploadedcomplete中，将保存的文件名改成了id+文件名的格式（我的效果可是在用户登录后才能用的）， 在js方法asyncfileupload1_uploadcomplete中加了document.getelementbyid("idImg").src="/Upload/"+(刚才服务器控件保存的文件名);
好了。完成了！
我觉得这个方法是很简单，可是对网站效率和用户体验都是一种考验。我还是想用filter的那种方式来实现。还有就是用传统的Ajax，也就是WebMethod的那种方式，前台后台数据交换的时候，应该如何交换呢？有没有知道的朋友来帮我解决一下呢！！
最后再来一句：嘎嘎……
