jQuery插件asp.net应用之AjaxUpload

本次使用AJAXUPLOAD做为上传客户端无刷上传插件，其最新版本为3.9，官方地址：http://valums.com/ajax-upload/

在页面中引入 jquery.min.1.4.2.js 和 ajaxupload.js

1. <scriptsrc="Scripts/jquery-1.4.2.min.js"type="text/javascript"></script>
2. <scriptsrc="Scripts/ajaxupload3.9.js"type="text/Javascript"></script>

HTML 代码：

1. <styletype="text/CSS">
2. #txtFileName{
3. width:300px;
4. }
5. .btnsubmit{border-bottom:#cc4f001pxsolid;border-left:#ff90001pxsolid;border-top:#ff90001pxsolid;border-right:#cc4f001pxsolid;text-align:center;padding:2px10px;line-height:16px;background:#e36b0f;height:24px;color:#fff;font-size:12px;cursor:pointer;}
6. </style>
8. 上传图片：<inputtype="text"id="txtFileName"/><divid="btnUp"style="width:300px;"class=btnsubmit>浏览</div>
10. <divid="imglist"></div>

js代 码：

1. <scripttype="text/javascript">
3. $(function(){
4. varbutton=$('#btnUp'),interval;
5. newAjaxUpload(button,{
6. //action:'upload-test.php',文件上传服务器端执行的地址
7. action:'/handler/AjaxuploadHandler.ashx',
8. name:'myfile',
9. onSubmit:function(file,ext){
10. if(!(ext&&/^(jpg|jpeg|JPG|JPEG)$/.test(ext))){
11. alert('图片格式不正确,请选择jpg格式的文件!','系统提示');
12. returnfalse;
13. }
15. //changebuttontext,whenuserselectsfile
16. button.text('上传中');
18. //Ifyouwanttoallowuploadingonly1fileattime,
19. //youcandisableuploadbutton
20. this.disable();
22. //Uploding->Uploading.->Uploading...
23. interval=window.setInterval(function(){
24. vartext=button.text();
25. if(text.length<10){
26. button.text(text+'|');
27. }else{
28. button.text('上传中');
29. }
30. },200);
31. },
32. onComplete:function(file,response){
33. //file本地文件名称，response服务器端传回的信息
34. button.text('上传图片(只允许上传JPG格式的图片,大小不得大于150K)');
36. window.clearInterval(interval);
38. //enableuploadbutton
39. this.enable();
41. vark=response.replace("<PRE>","").replace("</PRE>","");
43. if(k=='-1'){
44. alert('您上传的文件太大啦!请不要超过150K');
45. }
46. else{
47. alert("服务器端传回的串："+k);
48. alert("本地文件名称："+file);
49. $("#txtFileName").val(k);
50. $("<img/>").appendTo($('#imglist')).attr("src",k);
51. }
52. }
53. });
55. });
56. </script>

服务器端 ajaxuploadhandler.ashx 代码

1. publicvoidProcessRequest(HttpContextcontext)
2. {
3. context.Response.ContentType="text/plain";
5. HttpPostedFilepostedFile=context.Request.Files[0];
6. stringsavePath="/upload/images/";
7. intfilelength=postedFile.ContentLength;
8. intfileSize=163600;//150K
9. stringfileName="-1";//返回的上传后的文件名
10. if(filelength<=fileSize)
11. {
13. byte[]buffer=newbyte[filelength];
15. postedFile.InputStream.Read(buffer,0,filelength);
17. fileName=UploadImage(buffer,savePath,"jpg");
19. }
21. context.Response.Write(fileName);
22. }
24. publicstaticstringUploadImage(byte[]imgBuffer,stringuploadpath,stringext)
25. {
26. try
27. {
28. System.IO.MemoryStreamm=newMemoryStream(imgBuffer);
30. if(!Directory.Exists(HttpContext.Current.Server.MapPath(uploadpath)))
31. Directory.CreateDirectory(HttpContext.Current.Server.MapPath(uploadpath));
33. stringimgname=CreateIDCode()+"."+ext;
35. string_path=HttpContext.Current.Server.MapPath(uploadpath)+imgname;
37. Imageimg=Image.FromStream(m);
38. if(ext=="jpg")
39. img.Save(_path,System.Drawing.Imaging.ImageFormat.Jpeg);
40. else
41. img.Save(_path,System.Drawing.Imaging.ImageFormat.Gif);
42. m.Close();
44. returnuploadpath+imgname;
45. }
46. catch(Exceptionex)
47. {
48. returnex.Message;
49. }
51. }
53. publicstaticstringCreateIDCode()
54. {
55. DateTimeTime1=DateTime.Now.ToUniversalTime();
56. DateTimeTime2=Convert.ToDateTime("1970-01-01");
57. TimeSpanspan=Time1-Time2;//span就是两个日期之间的差额
58. stringt=span.TotalMilliseconds.ToString("0");
60. returnt;
61. }