jQuery插件ASP.NET应用之AjaxUpload

浏览数：51 / 时间：2015年06月09日

本次使用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.         }  

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 java src html 文件 使用 com class style 代码 java src html 文件 使用 com

相关文章

随机文章

您可能还喜欢

您可能还喜欢