目录：

1.       利用Jquery插件 ajaxfileupload 上传图片

2.       利用prototype插件实现图片的剪裁

环境：win2003+IE7

工具：

1.       上传图片

Jquery1.2.3

ajaxfileupload.js  用于上传图片

jquery-impromptu.1.5.js Jquery插件，弹出漂亮的对话框

x_open.js 在本页面连接其他页面。

2.       剪裁图片

prototype.js

scriptaculous.js?load=builder,effects,dragdrop

cropper.js   用于剪裁图片

 

Picture.aspx 上传图片 

当前头像：        
           <div id="testWrap">        
                 <img src="images/None.jpg" style="border:solid 1px #ccc" id="testImage"  width="130" height="134"/>        
            </div>        
           </div>        
           <div id="previewArea"></div>        
         <!--左侧 图片预览 结束-->        
         <!--右侧 图片上传-->        
           <div>        
           上传真实头像，成为星级用户，即可拥有无限量相册空间！<br/>         
           <img id="loading" src="images/loading.gif" style="display: none;" >        
             <input id="fileToUpload" type="file" size="45" name="fileToUpload" onchange="changeImage('fileToUpload','testImage')">        
             <!--οnchange="changeImage('fileToUpload','testImage')";-->        
               <br />        
               <br />        
              <input  type="button" id="buttonUpload" onclick="return ajaxFileUpload();" value="上传"></div>

注释：

         页面控件：

testImage 为图片预览及图片显示的位置

fileToUpload 文件选择控件

buttonUpload 上传文件按钮，出发javascript函数，上传图片

方法：

                   changeImage() javascript 方法，实现图片预览

         ajaxFileUpload() javascript 方法，实现图片上传

 方法源码：

1.changeImage() 

/**改变图片 在上传图片是使用。显示预览功能        
*** 参数：SourceID：填写上传控件的id        
***       mmID    ： Image显示图片的Imageid        
*** FileUpload onchange 事件使用        
**/       
function changeImage(sourceId,mmId)       
{       
  var
  var
   //检查图片格式        
  if(checkImageFormat(fileValue))       
  {       
      img.setAttribute("src", fileValue);       
   }

}

注释：

   该方法在本机测试没有问题，但根据反馈似乎没有效果，请大家慎重选择。如果有新的方法我会及时贴出。

2.ajaxFileUpload()上传图片

应用脚本：

ajaxfileupload.js  用于上传图片

jquery-impromptu.1.5.js

x_open.js 

function ajaxFileUpload()       
     {       
         $("#loading")       
         .ajaxStart(function(){       
              $(this).show();       
         })       
         .ajaxComplete(function(){       
              $(this).hide();       
         });       
         $.ajaxFileUpload       
         ({       
                  //Ajax访问页面  返回json 分别为：error 错误描述、msg 成功信息、imgName上传//之后的文件名        
url:'UploadImage.aspx',       
                   secureuri:false,       
                   fileElementId:'fileToUpload',       
                  dataType: 'json',       
                   success: function
                   {                  
                       if(typeof(data.error) != 'undefined')       
                       {       
                            if(data.error != '')       
                            {       
                               //弹出错误对话框        
                               $.prompt(data.error,{       
                              buttons:{Ok:true},       
                              prefix:'cleanblue'        
                             });       
                            }else        
                            {       
                              $("#testImage").attr("src","uploadImage/"+data.imgName);       
                              var str2=document.getElementById("testImage");       
                              var image = new Image();   
                              image = str2;       
                              
                              if(image.width>130 || image.height>100)       
                               {       
var'<h3 style="color:#ffffff">剪裁图片</h3>'+ '<p style="color:#ffffff">您的图片超出了大小，是否剪裁？</p>';       
                                var
                                      callback:mycallbackform,       
                                      buttons:{Ok:true,Cancel:false},       
                                      prefix:'impromptu'        
                                     });       
                                 
                                function
                                      
                                     if(v==true)       
                                     {       
                          //剪裁图片x_open()方法 x_open.js         
  x_open('剪裁图片', 'CropPicture.aspx?imgUrl='+data.imgName,600,400)       
                                      
                                     }       
                                 }       
                                 
                              }       
                              else        
                              {       
                                    $.prompt(data.msg,{       
                                  buttons:{Ok:true},       
                                  prefix:'cleanblue'        
                                 });       
                              }       
                                 
                              
                            }       
                       }       
                   },       
                   error: function
                   {       
                       alert(e);       
                   }       
              }       
         )       
         
         return false;       
                       
     }

注释：

1.   类

a)    UploadImage.aspx.cs 上传图片。将上传图片的代码写在改类。

b)    CropPicture.aspx.cs 接收上传图片后的图片参数，显示在本页面中。

完成功能之后的截图：

 

 

第二部分：剪裁图片

 

未完待续………