jQuery插件ASP.NET应用之AjaxUpload

本次使用AJAXUPLOAD做为上传客户端无刷上传插件，其最新版本为3.9，点此下载JS文件

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

 

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

 

HTML 代码：

 

代码

< style  type ="text/css" >
        #txtFileName  {
            width :  300px ;
         }
        .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 ; }
     </ style >

上传图片： < input  type ="text"  id ="txtFileName"   />< div   id ="btnUp"  style ="width:300px;"  class =btnsubmit  > 浏览 </ div >

<div id="imglist"></div>

 

 

js代 码：

 

代码

< script type = " text/javascript " >

    $( function  () {
         var  button  =  $( ' #btnUp ' ), interval;
         new  AjaxUpload(button, {
             // action: 'upload-test.php',文件上传服务器端执行的地址
            action:  ' /handler/AjaxuploadHandler.ashx ' ,
            name:  ' myfile ' ,
            onSubmit:  function  (file, ext) {
                 if  ( ! (ext  &&   / ^(jpg|jpeg|JPG|JPEG)$ / .test(ext))) {
                    alert( ' 图片格式不正确,请选择 jpg 格式的文件! ' ,  ' 系统提示 ' );
                     return   false ;
                }

                 //  change button text, when user selects file
                button.text( ' 上传中 ' );

                 //  If you want to allow uploading only 1 file at time,
                 //  you can disable upload button
                 this .disable();

                 //  Uploding -> Uploading. -> Uploading...
                interval  =  window.setInterval( function  () {
                     var  text  =  button.text();
                     if  (text.length  <   10 ) {
                        button.text(text  +   ' | ' );
                    }  else  {
                        button.text( ' 上传中 ' );
                    }
                },  200 );
            },
            onComplete:  function  (file, response) {
                 // file 本地文件名称，response 服务器端传回的信息
                button.text( ' 上传图片(只允许上传JPG格式的图片,大小不得大于150K) ' );
                
                window.clearInterval(interval);

                 //  enable upload button
                 this .enable();

                 var  k  =  response.replace( " <PRE> " ,  "" ).replace( " </PRE> " ,  "" );

                 if  (k  ==   ' -1 ' ) {
                    alert( ' 您上传的文件太大啦!请不要超过150K ' );
                }
                 else  {
                    alert( " 服务器端传回的串： " + k);
                    alert( " 本地文件名称： " + file);
                    $( " #txtFileName " ).val(k);
                    $( " <img /> " ).appendTo($( ' #imglist ' )).attr( " src " , k);
                }
            }
        });

    });
< / script>

 

 

服务器端 ajaxuploadhandler.ashx 代码

代码

public   void  ProcessRequest(HttpContext context)
        {
            context.Response.ContentType  =   " text/plain " ;

            HttpPostedFile postedFile  =  context.Request.Files[ 0 ];
             string  savePath  =   " /upload/images/ " ;
             int  filelength  =  postedFile.ContentLength;
             int  fileSize  =   163600 ;  // 150K
             string  fileName  =   " -1 " ;  // 返回的上传后的文件名
             if  (filelength  <=  fileSize)
            {

                 byte [] buffer  =   new   byte [filelength];

                postedFile.InputStream.Read(buffer,  0 , filelength);

                fileName  =  UploadImage(buffer, savePath,  " jpg " );

            }

            context.Response.Write(fileName);
        }

         public   static   string  UploadImage( byte [] imgBuffer,  string  uploadpath,  string  ext)
        {
             try
            {
                System.IO.MemoryStream m  =   new  MemoryStream(imgBuffer);

                 if  ( ! Directory.Exists(HttpContext.Current.Server.MapPath(uploadpath)))
                    Directory.CreateDirectory(HttpContext.Current.Server.MapPath(uploadpath));

                 string  imgname  =  CreateIDCode()  +   " . "   +  ext;

                 string  _path  =  HttpContext.Current.Server.MapPath(uploadpath)  +  imgname;

                Image img  =  Image.FromStream(m);
                 if  (ext  ==   " jpg " )
                    img.Save(_path, System.Drawing.Imaging.ImageFormat.Jpeg);
                 else
                    img.Save(_path, System.Drawing.Imaging.ImageFormat.Gif);
                m.Close();

                 return  uploadpath  +  imgname;
            }
             catch  (Exception ex)
            {
                 return  ex.Message;
            }

        }

         public   static   string  CreateIDCode()
        {
            DateTime Time1  =  DateTime.Now.ToUniversalTime();
            DateTime Time2  =  Convert.ToDateTime( " 1970-01-01 " );
            TimeSpan span  =  Time1  -  Time2;    // span就是两个日期之间的差额   
             string  t  =  span.TotalMilliseconds.ToString( " 0 " );

             return  t;
        }

 

 

在下一节中，将加入上传图片并生成缩略图，无刷新刷删除图片的操作。

 

2010.7.5 疯狂秀才