jQuery插件ASP.NET应用之AjaxUpload

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

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

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

HTML 代码：

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

js代 码：

1. <script type="text/javascript">
2. $(function () {
3. var button = $('#btnUp'), interval;
4. new AjaxUpload(button, {
5. //action: 'upload-test.php',文件上传服务器端执行的地址
6. action: '/handler/AjaxuploadHandler.ashx',
7. name: 'myfile',
8. onSubmit: function (file, ext) {
9. if (!(ext && /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) {
10. alert('图片格式不正确,请选择 jpg 格式的文件!', '系统提示');
11. return false;
12. }
13. // change button text, when user selects file
14. button.text('上传中');
15. // If you want to allow uploading only 1 file at time,
16. // you can disable upload button
17. this.disable();
18. // Uploding -> Uploading. -> Uploading...
19. interval = window.setInterval(function () {
20. var text = button.text();
21. if (text.length < 10) {
22. button.text(text + '|');
23. } else {
24. button.text('上传中');
25. }
26. }, 200);
27. },
28. onComplete: function (file, response) {
29. //file 本地文件名称，response 服务器端传回的信息
30. button.text('上传图片(只允许上传JPG格式的图片,大小不得大于150K)');
31. window.clearInterval(interval);
32. // enable upload button
33. this.enable();
34. var k = response.replace("<PRE>", "").replace("</PRE>", "");
35. if (k == '-1') {
36. alert('您上传的文件太大啦!请不要超过150K');
37. }
38. else {
39. alert("服务器端传回的串："+k);
40. alert("本地文件名称："+file);
41. $("#txtFileName").val(k);
42. $("<img />").appendTo($('#imglist')).attr("src", k);
43. }
44. }
45. });
46. });
47. </script>

服务器端 ajaxuploadhandler.ashx 代码

1. public void ProcessRequest(HttpContext context)
2. {
3. context.Response.ContentType = "text/plain";
4. HttpPostedFile postedFile = context.Request.Files[0];
5. string savePath = "/upload/images/";
6. int filelength = postedFile.ContentLength;
7. int fileSize = 163600; //150K
8. string fileName = "-1"; //返回的上传后的文件名
9. if (filelength <= fileSize)
10. {
11. byte[] buffer = new byte[filelength];
12. postedFile.InputStream.Read(buffer, 0, filelength);
13. fileName = UploadImage(buffer, savePath, "jpg");
14. }
15. context.Response.Write(fileName);
16. }
17. public static string UploadImage(byte[] imgBuffer, string uploadpath, string ext)
18. {
19. try
20. {
21. System.IO.MemoryStream m = new MemoryStream(imgBuffer);
22. if (!Directory.Exists(HttpContext.Current.Server.MapPath(uploadpath)))
23. Directory.CreateDirectory(HttpContext.Current.Server.MapPath(uploadpath));
24. string imgname = CreateIDCode() + "." + ext;
25. string _path = HttpContext.Current.Server.MapPath(uploadpath) + imgname;
26. Image img = Image.FromStream(m);
27. if (ext == "jpg")
28. img.Save(_path, System.Drawing.Imaging.ImageFormat.Jpeg);
29. else
30. img.Save(_path, System.Drawing.Imaging.ImageFormat.Gif);
31. m.Close();
32. return uploadpath + imgname;
33. }
34. catch (Exception ex)
35. {
36. return ex.Message;
37. }
38. }
39. public static string CreateIDCode()
40. {
41. DateTime Time1 = DateTime.Now.ToUniversalTime();
42. DateTime Time2 = Convert.ToDateTime("1970-01-01");
43. TimeSpan span = Time1 - Time2;   //span就是两个日期之间的差额
44. string t = span.TotalMilliseconds.ToString("0");
45. return t;
46. }