jQuery外掛程式ASP.NET應用之AjaxUpload

標籤：style   http   color   io   os   使用   java   ar   for   

本次使用AJAXUPLOAD做為上傳用戶端無刷上傳外掛程式，其最新版本為3.9，官方地址：http://valums.com/ajax-upload/

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

 

Html代碼  

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 程式碼：

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.   
8. 上傳圖片：<input type="text" id="txtFileName" /><div  id="btnUp" style="width:300px;" class=btnsubmit >瀏覽</div>  
9.   
10. <div id="imglist"></div>  

 js代 碼：

Js代碼  

1. <script type="text/javascript">  
2.   
3.     $(function () {  
4.         var button = $(‘#btnUp‘), interval;  
5.         new AjaxUpload(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.                     return false;  
13.                 }  
14.   
15.                 // change button text, when user selects file  
16.                 button.text(‘上傳中‘);  
17.   
18.                 // If you want to allow uploading only 1 file at time,  
19.                 // you can disable upload button  
20.                 this.disable();  
21.   
22.                 // Uploding -> Uploading. -> Uploading...  
23.                 interval = window.setInterval(function () {  
24.                     var text = 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)‘);  
35.                   
36.                 window.clearInterval(interval);  
37.   
38.                 // enable upload button  
39.                 this.enable();  
40.   
41.                 var k = response.replace("<PRE>", "").replace("</PRE>", "");  
42.   
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.         });  
54.   
55.     });  
56. </script>  

 伺服器端 ajaxuploadhandler.ashx 代碼

Js代碼  

1. public void ProcessRequest(HttpContext context)  
2.         {  
3.             context.Response.ContentType = "text/plain";  
4.   
5.             HttpPostedFile postedFile = context.Request.Files[0];  
6.             string savePath = "/upload/images/";  
7.             int filelength = postedFile.ContentLength;  
8.             int fileSize = 163600; //150K  
9.             string fileName = "-1"; //返回的上傳後的檔案名稱  
10.             if (filelength <= fileSize)  
11.             {  
12.   
13.                 byte[] buffer = new byte[filelength];  
14.   
15.                 postedFile.InputStream.Read(buffer, 0, filelength);  
16.   
17.                 fileName = UploadImage(buffer, savePath, "jpg");  
18.   
19.             }  
20.   
21.             context.Response.Write(fileName);  
22.         }  
23.   
24.         public static string UploadImage(byte[] imgBuffer, string uploadpath, string ext)  
25.         {  
26.             try  
27.             {  
28.                 System.IO.MemoryStream m = new MemoryStream(imgBuffer);  
29.   
30.                 if (!Directory.Exists(HttpContext.Current.Server.MapPath(uploadpath)))  
31.                     Directory.CreateDirectory(HttpContext.Current.Server.MapPath(uploadpath));  
32.   
33.                 string imgname = CreateIDCode() + "." + ext;  
34.   
35.                 string _path = HttpContext.Current.Server.MapPath(uploadpath) + imgname;  
36.   
37.                 Image img = 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();  
43.   
44.                 return uploadpath + imgname;  
45.             }  
46.             catch (Exception ex)  
47.             {  
48.                 return ex.Message;  
49.             }  
50.   
51.         }  
52.   
53.         public static string CreateIDCode()  
54.         {  
55.             DateTime Time1 = DateTime.Now.ToUniversalTime();  
56.             DateTime Time2 = Convert.ToDateTime("1970-01-01");  
57.             TimeSpan span = Time1 - Time2;   //span就是兩個日期之間的差額     
58.             string t = span.TotalMilliseconds.ToString("0");  
59.   
60.             return t;  
61.         }  

jQuery外掛程式ASP.NET應用之AjaxUpload