目录:
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 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 接收上传图片后的图片参数,显示在本页面中。
完成功能之后的截图:
第二部分:剪裁图片
未完待续………