利用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 接收上传图片后的图片参数，显示在本页面中。
完成功能之后的截图：

第二部分：剪裁图片

未完待续………