利用JQuery及其插件做出一个上传图片及利用prototype插件显示剪裁图片的例题

目录：

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')">

             <!--onchange="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 fileValue=document.getElementById(sourceId).value;

  var img=document.getElementById(mmId);

   //检查图片格式

  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 (data, status)

                   {                 

                       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 brown_theme_text = '<h3 style="color:#ffffff">剪裁图片</h3>'+ '<p style="color:#ffffff">您的图片超出了大小，是否剪裁？</p>';

                                var flage= $.prompt(brown_theme_text,{

                                      callback:mycallbackform,

                                      buttons:{Ok:true,Cancel:false},

                                      prefix:'impromptu'

                                     });

                                

                                function mycallbackform(v,m){

                                     

                                     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 (data, status, e)

                   {

                       alert(e);

                   }

              }

         )

        

         return false;

 

     }

注释：

1.   类

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

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

完成功能之后的截图：

 

 

第二部分：剪裁图片

 

未完待续………